Pourquoi z-index ne fonctionne-t-il pas?

Vos éléments doivent avoir un attribut position. (par exemple absolu, relatif, fixe) ou z-index ne fonctionnera pas

Si vous définissez position sur une valeur autre que static mais que z-index de votre élément ne semble toujours pas fonctionner, il se peut qu'un élément parent ait z-index défini.

Les contextes d'empilement ont une hiérarchie, et chaque contexte d'empilement est considéré dans l'ordre d'empilement du contexte d'empilement parent.

, Donc avec html suivant

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

Quelle que soit la taille du z-index de el3, il sera toujours sous el1 parce que son parent a contexte d'empilage inférieur. Vous pouvez imaginer ordre d'empilement des niveaux où l'ordre d'empilement de el3 est en fait 3.8 ce qui est inférieur 5.

Si vous voulez vérifier les contextes d'empilement des éléments parents, vous pouvez utiliser ceci:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

Il y a un excellent article sur les contextes d'empilage sur MDN

Dans de nombreux cas, un élément doit être positionné pour que z-index fonctionne.

En effet, appliquer position: relative aux éléments de la question résoudrait probablement le problème (mais il n'y a pas assez de code fourni pour être sûr).

En Fait, position: fixed, position: absolute et position: sticky permettra également de z-index, mais ces valeurs également modifier la mise en page. Avec position: relative la mise en page n'est pas perturbée.

, Essentiellement, tant que l'élément n'est pas position: static (paramètre par défaut), il est considéré comme placé et z-index va travailler.

Beaucoup de réponses à "pourquoi l'index z ne fonctionne-t-il pas?" les questions affirment que z-index seul Fonctionne sur les éléments positionnés. À partir de CSS3, ce n'est plus vrai.

Éléments qui sont flex éléments ou éléments de la grille pouvez utiliser z-index, même lorsque position est static.

D'après les spécifications:

4.3. Flex Élément Z De La Commande

Flex les éléments peignent exactement la même chose que les blocs en ligne, sauf que l'ordre des documents modifié par ordre est utilisé à la place de raw l'ordre du document et les valeurs z-index autres que auto créent un contexte d'empilement même si position vaut static.

5.4. Ordre de l'axe Z: la propriété z-index

L'ordre de peinture des éléments de grille est exactement le même que celui des blocs en ligne, sauf que l'ordre des documents utilisé à la place de l'ordre des documents bruts, et z-index valeurs autres que auto crée un contexte d'empilement même si position est static.

Voici une démonstration de z-index travaillant sur des éléments flexibles non positionnés: https://jsfiddle.net/m0wddwxs/

Ajout à la réponse de Buksy:

Pour résoudre partiellement le problème d'empilement de contenu, Vous pouvez utiliser les propriétés css pour combiner différents éléments d'affichage, par exemple:

opacity: 0.1;

Ou

display: none;