z-index ne fonctionne pas avec un positionnement fixe
j'ai un div
avec positionnement par défaut (c'est à dire position:static
) et un div
avec un fixed
.
si je règle les index en z des éléments, il semble impossible de faire passer l'élément fixe derrière l'élément statique.
#over {
width: 600px;
z-index: 10;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under">
</div>
</body>
</html>
ou sur jsfiddle ici: http://jsfiddle.net/mhFxf /
je peux contourner cela en utiliser
position:absolute
sur l'élément statique, mais est-ce que quelqu'un peut me dire pourquoi cela se produit?
(il semble y avoir une question similaire à celle-ci, ( position fixe cassante z-index ) mais elle n'a pas une réponse satisfaisante, donc je pose cette question ici avec mon code d'exemple)
9 réponses
cette question peut être résolue de plusieurs façons, mais vraiment, connaître les règles de cumul vous permet de trouver la meilleure réponse qui fonctionne pour vous.
Solutions
l'élément <html>
est votre seul contexte d'empilage, alors suivez simplement les règles d'empilage dans un contexte d'empilage et vous verrez que les éléments sont empilés dans cet ordre
- l'élément racine du contexte d'empilage (l'élément
<html>
élément dans ce cas)- éléments positionnés (et leurs enfants) avec des valeurs négatives de l'indice z (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments avec la même valeur sont empilés selon l'apparence dans le HTML)
- éléments Non positionnés (ordonnés par apparence dans le HTML)
- éléments positionnés (et leurs enfants) avec une valeur d'index en z d'auto (Classés par apparence dans le HTML)
- éléments positionnés (et leurs enfants) avec des valeurs positives de l'indice z (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments avec la même valeur sont empilés selon l'apparence dans le HTML)
donc vous pouvez
- définit un indice z de -1, pour
#under
positionné-l'indice z De ve apparaît derrière "Non positionné#over
élément - jeu de l' position de
#over
àrelative
de sorte que la règle 5 s'y applique
Le Vrai Problème
les développeurs doivent savoir ce qui suit avant d'essayer de changer l'ordre de cumul des éléments.
- Lorsqu'un contexte d'empilage est formé
- par défaut, l'élément
<html>
est l'élément racine et est le premier contexte d'empilage
- par défaut, l'élément
- ordre de cumul dans un contexte de cumul
les règles d'ordre de cumul et de contexte de cumul ci-dessous sont à partir de ce lien
Quand un empilement contexte est formé
- Lorsqu'un élément est l'élément racine d'un document (le
<html>
élément) - Lorsqu'un élément a une position valeur autre que statique et indice z autre que automatique 1519180920"
- Lorsqu'un élément a une valeur d'opacité inférieure à 1
- plusieurs nouvelles propriétés CSS créent également des contextes d'empilage. Il s'agit notamment des transformes, des filtres, des régions css, des supports de pagination, et peut-être d'autres. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- en règle générale, il semble que si une propriété CSS nécessite rendu dans un hors contexte, il doit créer un nouveau contexte d'empilement.
ordre de cumul dans un contexte de cumul
l'ordre des éléments:
- l'élément root du contexte de cumul (l'élément
<html>
est le seul contexte de cumul par défaut, mais tout élément peut être un élément root pour un contexte de cumul, voir règles ci-dessus)- Vous ne pouvez pas mettre un élément enfant derrière une racine de l'empilement élément de contexte
- éléments positionnés (et leurs enfants) avec des valeurs négatives de l'indice z (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments avec la même valeur sont empilés selon l'apparence dans le HTML)
- éléments Non positionnés (ordonnés par apparence dans le HTML)
- positionné les éléments (et leurs enfants) avec un z-index de la valeur de l'auto (commandé par l'apparition dans le code HTML)
- éléments positionnés (et leurs enfants) avec des valeurs positives de l'indice z (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments avec la même valeur sont empilés selon l'apparence dans le HTML)
ajouter position: relative;
à #over
#over {
width: 600px;
z-index: 10;
position: relative;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under"></div>
</body>
</html>
z-index fonctionne seulement dans un contexte particulier i.e. relative
, fixed
ou absolute
position.
z-index pour un div relatif n'a rien à voir avec le z-index
d'un div fixe ou absolu.
MODIFIER C'est une réponse incomplète. Cette réponse fournit de fausses informations. Veuillez lire le commentaire de @Dansingerman et l'exemple ci-dessous.
depuis que votre over
div n'a pas de positionnement, le z-index ne sait pas où et comment le positionner (et par rapport à quoi?). Il suffit de changer la position de votre Div over en position relative, de sorte qu'il n'y a pas d'effets secondaires sur cette div Et puis la div under obéira à votre volonté.
voici votre exemple sur jsfiddle: Fiddle
edit : je vois que quelqu'un a déjà mentionné cette réponse!
donner le #under
un négatif z-index
, p.ex. -1
cela se produit parce que la propriété z-index
est ignorée dans position: static;
, qui se trouve être la valeur par défaut; donc dans le code CSS que vous avez écrit, z-index
est 1
pour les deux éléments peu importe la hauteur que vous mettez dans #over
.
en donnant à #under
une valeur négative, il sera derrière tout élément z-index: 1;
, i.e. #over
.
je construisais un menu nav. J'ai overflow: hidden
dans mon GPS qui cache tout. Je pensais que c'était un problème de z-index, mais en fait je cachais tout en dehors de ma navigation.
lorsque les éléments sont placés en dehors du flux normal, ils peuvent chevaucher d'autres éléments.
selon la section Éléments de chevauchement sur http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp
il suffit de regarder dans MDN documentation . Il est la meilleure explication que j'ai jamais vu.
le comportement des éléments fixes (et des éléments absolus) tels que définis dans la spécification CSS:
ils se comportent comme s'ils étaient détachés du document, et placés dans le parent fixe/absolu le plus proche. (pas un mot par mot citation)
cela rend le calcul de zindex un peu compliqué, j'ai résolu mon problème (la même situation) en créant dynamiquement un conteneur dans l'élément de corps et en déplaçant tous ces éléments (qui sont classe-ed comme "ma-fixe" à l'intérieur de ce corps au niveau de l'élément)