div ( z-index: 1; /* integer */ )La z-indexpropriété en CSS contrôle l'ordre d'empilement vertical des éléments qui se chevauchent. Comme dans, lequel apparaît comme s'il était physiquement plus proche de vous. z-indexn'affecte que les éléments qui ont une valeur de position autre que static(la valeur par défaut).
Les éléments peuvent se chevaucher pour diverses raisons, par exemple, le positionnement relatif les a poussés sur autre chose. La marge négative a tiré l'élément au-dessus d'un autre. Les éléments parfaitement positionnés se chevauchent. Toutes sortes de raisons.
Sans aucune z-indexvaleur, les éléments s'empilent dans l'ordre dans lequel ils apparaissent dans le DOM (le plus bas au même niveau de hiérarchie apparaît en haut). Les éléments avec un positionnement non statique apparaîtront toujours au-dessus des éléments avec un positionnement statique par défaut.
Notez également que la nidification joue un grand rôle. Si un élément B se trouve au-dessus de l'élément A, un élément enfant de l'élément A ne peut jamais être supérieur à l'élément B.
Notez que l'ancienne version d'IE a un peu foiré ce contexte. Voici un correctif jQuery pour cela.
Plus d'information
- Screencast: fonctionnement de z-index
- Documents MDN
- Article complet: Comprendre le z-index
- Valeurs rationnelles de l'indice z
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | 4+ | 4+ | Travaux |