web-dev-qa-db-fra.com

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

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

enter image description here

Je veux placer l'image du bas (la balise/carte) en dessous de la 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?

htmlcsscss3z-index
156
Linkjuice57

La propriété z-index ne fonctionne que sur les éléments avec une valeur position autre que static (par exemple, _position: absolute;_, _position: relative;_ ou _position: fixed_).

Il existe également un _position: sticky;_ pris en charge dans Firefox, préfixé dans Safari, utilisé pendant un certain temps dans les anciennes versions de Chrome sous un drapeau personnalisé, et Microsoft envisage d’ajouter à leur Edge. navigateur.

372
Evert

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

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 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 placé sous el1 car son parent a un contexte d'empilement inférieur. Vous pouvez imaginer l'ordre d'empilement sous forme de niveaux où l'ordre d'empilement de el3 est réellement 3.8 , ce qui est inférieur à . 5 .

Si vous voulez vérifier les contextes de superposition 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

49
Buksy

Vos éléments doivent avoir un attribut position. (par exemple, absolute, relative, fixed) ou z-index ne fonctionnera pas.

26
clem

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 permettrait probablement de résoudre le problème (mais le code fourni est insuffisant pour en être sûr).

En fait, position: fixed, position: absolute et position: sticky activeront également z-index, mais ces valeurs modifieront également la présentation. 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 positionné et z-index fonctionnera.

Beaucoup de réponses à "Pourquoi z-index ne fonctionne-t-il pas?" des questions affirment que z-index seulement fonctionne correctement éléments. Depuis CSS3, ce n'est plus vrai.

Eléments qui sont éléments flexibles ou éléments maillés peut utiliser z-index même lorsque position est static.

D'après les spécifications:

[4.3. Flex Item Z-Ordering

Les éléments Flex peignent exactement de la même manière que les blocs en ligne, à la différence que l'ordre du document modifié est utilisé à la place de l'ordre du document brut et que les valeurs z-index autres que auto créent un contexte de pile même si position est static.

5.4. Classement sur l'axe Z: la propriété z-index]

L'ordre de peinture des éléments de la grille est identique à celui des blocs en-ligne, à la différence que l'ordre du document modifié est utilisé à la place de l'ordre du document brut et que les valeurs z-index autres que auto créent un contexte de pile, même si position est static.

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

20
Michael_B