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

182

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

entrez la description de l'image ici

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?

Linkjuice57
la source

Réponses:

434

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.

Evert
la source
3
En ajoutant à cette réponse, chrome et probablement d'autres navigateurs au moment de la rédaction de cet article nécessitent que vous position: relative
déclariez
staticles éléments sont statiques et ne peuvent pas se déplacer x, y or z planes. Ils ne peuvent pas emménager x plane (left or right)ou y plane (top or bottom)aimer quand nous travaillons avec position: absolute. Et ils ne peuvent pas non plus se déplacer dans le z plane i.e. with z-index.
Akash
êtes-vous au courant de problèmes d'utilisation z-indexdans un élément de grille?
oldboy
60

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

Buksy
la source
comment y remédier?
SM Pat
3
définir le z-index approprié des éléments parents.
Buksy
love that script
Matoeil
31

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

clem
la source
26

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/

Michael Benjamin
la source
3
"Les éléments qui sont des éléments flexibles ou des éléments de grille peuvent utiliser z-index même lorsque la position est statique." Oui, la spécification dit essentiellement de traiter position: staticexactement la même chose que position: relativepour les éléments flex et grid en raison de la nature dynamique de ces méthodes de mise en page. Je dirais donc peut-être que ce n'est plus vrai dans CSS3 qu'un élément doit être positionné, mais que CSS3 traite les éléments flex et grid comme s'ils étaient positionnés, peu importe. Mais probablement deux façons de voir la même chose.
TylerH
@TylerH nous devrions prêter attention à cette partie de la spécification car nous devrions traiter statique de la même manière que relative uniquement lorsqu'il s'agit de z-index et pas en général. Vous ne pouvez pas, par exemple, déplacer un élément flexible en utilisant gauche / haut / bas / droite sauf si vous spécifiez explicitement position:relative. Les descendants d'éléments flexibles avec une position absolue ne considéreront pas l'élément flexible comme leur bloc conteneur car l'élément flexible n'est pas positionné. ( jsfiddle.net/0yo7utfL/2 )
Temani Afif
j'ai trouvé un "bug" bizarre avec css. pour une raison quelconque overflow-y: scrollempêche overflow-x: visiblede fonctionner ... pouvez-vous s'il vous plaît jeter un oeil?
oldboy