Pourquoi z-index ne fonctionne pas?

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

entrer la description de l'image ici

Je veux placer l’image du bas (le tag / la carte) sous le div au dessus. Donc, vous ne pouvez 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 propriété z-index ne fonctionne que sur les éléments ayant une valeur de position autre que static (par exemple, position: absolute; position: relative; ou position: fixed ).

Il y a aussi la 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 indicateur personnalisé, et Microsoft envisage de l’append à son navigateur Edge.

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

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

En effet, appliquer une 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 savoir avec certitude).

En fait, position: fixed , position: absolute et position: sticky également z-index , mais ces valeurs modifient également la disposition. Avec position: relative la disposition n’est pas perturbée.

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-index fonctionnera.


Beaucoup de réponses à “Pourquoi z-index ne fonctionne-t-il pas?” Les questions affirment que z-index ne fonctionne que sur les éléments positionnés. À partir de CSS3, ce n’est plus vrai.

Les éléments qui sont des éléments flexibles ou des éléments de grid peuvent utiliser z-index même lorsque la position est static .

À partir des spécifications:

4.3. Article Flex Commande Z

Les éléments Flex peignent exactement les mêmes que les blocs en ligne, sauf que l’ordre des documents modifiés par ordre est utilisé à la place de l’ordre des documents bruts et que les valeurs d’ z-index autres que auto créent un contexte d’emstackment même si la position est static .

5.4. Ordre des axes Z: la propriété z-index

L’ordre de dessin des éléments de la grid est exactement le même que celui des blocs inline, sauf que l’ordre des documents modifié par ordre est utilisé à la place de l’ordre des documents bruts et que les valeurs d’ z-index autres que auto créent un contexte d’emstackment.

Voici une démonstration du fonctionnement de z-index sur les éléments flex non positionnés: https://jsfiddle.net/m0wddwxs/

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

Les contextes d’emstackment ont une hiérarchie et chaque contexte d’emstackment est pris en compte dans l’ordre d’emstackment du contexte d’emstackment du parent.

Donc, avec le 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; } 
 

Ajout à la réponse de Buksy:

Pour résoudre en partie le problème du contenu de l’emstackment, vous pouvez utiliser les propriétés css pour combiner des éléments d’affichage différents, par exemple:

 opacity: 0.1; 

ou

 display: none;