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

Donc si je comprends z-indexbien, ce serait parfait dans cette situation:

Je veux placer l'image du bas (la balise / la carte) sous le div au-dessus. Vous ne pouvez donc pas voir les arêtes vives. Comment puis-je faire cela?

z-index:-1 // on the image tag/card

ou

z-index:100 // on the div above

ne fonctionne pas non plus. Ni une combinaison de quelque chose comme ça. Comment venir?

La z-indexpropriété ne fonctionne que sur les éléments d'une positionvaleur autre que static(par exemple position: absolute;, position: relative;ouposition: fixed ).

Il y a aussi ce position: sticky;qui est pris en charge dans Firefox, est préfixé dans Safari, a fonctionné pendant un certain temps dans les anciennes versions de Chrome sous un drapeau personnalisé et est à l'étude par Microsoft pour l'ajouter à son navigateur Edge.

Important
Pour un positionnement régulier, veillez à inclure position: relativeles éléments sur lesquels vous définissez également le z-index. Sinon, cela ne prendra pas effet.

Si vous définissez la position sur une valeur autre que staticmais que celle de votre élément z-indexne semble toujours pas fonctionner, il se peut qu'un élément parent ait été z-indexdé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 du parent.

Donc, avec le code 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 de la valeur de z-indexof el3sera définie, elle sera toujours sous el1car son parent a un contexte d'empilement inférieur. Vous pouvez imaginer l'ordre d'empilement comme des niveaux où l'ordre d'empilement de el3est en fait de 3,8, ce qui est inférieur à 5 .

Si vous souhaitez 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 l'empilement de contextes sur MDN

Vos éléments doivent avoir un positionattribut. (par exemple absolute, relative, fixed) ou z-indexne fonctionnera pas.

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

En effet, appliquer position: relativeaux é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: absoluteet position: stickypermettra également z-index, mais ces valeurs changent aussi la mise en page. Avec position: relativela mise en page n'est pas dérangé.

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

De nombreuses réponses à "Pourquoi z-index ne fonctionne-t-il pas?" les questions affirment que z-index seulement fonctionne que sur des éléments positionnés. Depuis CSS3, ce n'est plus vrai.

Les éléments qui sont des éléments flexibles ou éléments de la grille peuvent utiliser z-indexmême quand positionest static.

D'après les spécifications:

4.3. Commande en Z des articles flexibles

Les éléments Flex peignent exactement de la même manière que les blocs en ligne, sauf que l'ordre des documents modifié par ordre est utilisé à la place de l'ordre des documents bruts, et des z-indexvaleurs autres que autocréer un contexte d'empilement même si positionc'est le cas static.

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

L'ordre de peinture des éléments de la grille est exactement le même que celui des blocs en ligne, sauf que l'ordre des documents modifié par ordre est utilisé à la place de l'ordre des documents bruts et des z-indexvaleurs autres que celles de autocréer un contexte d'empilement même si positionc'est le cas static.

Voici une démonstration du z-indextravail sur des éléments flex non positionnés: https://jsfiddle.net/m0wddwxs/