Donc si je comprends bien z-index
, ce serait parfait dans cette situation:
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 queauto
créent un contexte d’emstackment même si laposition
eststatic
.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 queauto
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;