z-index ne fonctionne pas avec un positionnement fixe

422

J'ai un divavec un positionnement par défaut (ie position:static) et un divavec une fixedposition.

Si je fixe les z-index 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>
Développer l'extrait

Ou sur jsfiddle ici: http://jsfiddle.net/mhFxf/

Je peux contourner cela en utilisant position:absolute l'élément statique, mais quelqu'un peut-il me dire pourquoi cela se produit?

(Il semble y avoir une question similaire à celle-ci, ( Positionnement fixe cassant le z-index ) mais il n'a pas de réponse satisfaisante, donc je pose cette question ici avec mon exemple de code)

css z-index DanSingerman
la source

Réponses:

146

Cette question peut être résolue de plusieurs manières, mais vraiment, connaître les règles d'empilement vous permet de trouver la meilleure réponse qui vous convient.

Solutions

L' <html>élément est votre seul contexte d'empilement, alors suivez simplement les règles d'empilement dans un contexte d'empilement et vous verrez que les éléments sont empilés dans cet ordre

  1. L'élément racine du contexte d'empilement (l' <html>élément dans ce cas)
  2. Éléments positionnés (et leurs enfants) avec des valeurs d'index z négatives (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments ayant la même valeur sont empilés en fonction de l'apparence dans le code HTML)
  3. Éléments non positionnés (classés par apparence dans le HTML)
  4. Éléments positionnés (et leurs enfants) avec une valeur d'index z de auto (classés par apparence dans le HTML)
  5. Éléments positionnés (et leurs enfants) avec des valeurs d'index z positives (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments ayant la même valeur sont empilés en fonction de l'apparence dans le code HTML)

Afin que vous puissiez

  1. définissez un z-index de -1, pour #underque les z-index positionnés apparaissent derrière l' #overélément non positionné
  2. définir la position de #overpour relativeque la règle 5 lui soit applicable

Le vrai problème

Les développeurs doivent connaître les éléments suivants avant d'essayer de modifier l'ordre d'empilement des éléments.

  1. Lorsqu'un contexte d'empilement est formé
    • Par défaut, l' <html>élément est l'élément racine et est le premier contexte d'empilement
  2. Ordre d'empilement dans un contexte d'empilement

Les règles d'ordre d'empilement et de contexte d'empilement ci-dessous proviennent de ce lien

Lorsqu'un contexte d'empilement est formé

  • Lorsqu'un élément est l'élément racine d'un document (l' <html>élément)
  • Lorsqu'un élément a une valeur de position autre que statique et une valeur d'index z autre que automatique
  • Lorsqu'un élément a une valeur d'opacité inférieure à 1
  • Plusieurs propriétés CSS plus récentes créent également des contextes d'empilement. Ceux-ci incluent: les transformations, les filtres, les régions CSS, les médias paginés et éventuellement 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 un rendu dans un contexte hors écran, elle doit créer un nouveau contexte d'empilement.

Ordre d'empilement dans un contexte d'empilement

L'ordre des éléments:

  1. L'élément racine du contexte d'empilement (l' <html>élément est le seul contexte d'empilement par défaut, mais tout élément peut être un élément racine pour un contexte d'empilement, voir les règles ci-dessus)
    • Vous ne pouvez pas placer un élément enfant derrière un élément de contexte d'empilement racine
  2. Éléments positionnés (et leurs enfants) avec des valeurs d'index z négatives (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments ayant la même valeur sont empilés en fonction de l'apparence dans le code HTML)
  3. Éléments non positionnés (classés par apparence dans le HTML)
  4. Éléments positionnés (et leurs enfants) avec une valeur d'index z de auto (classés par apparence dans le HTML)
  5. Éléments positionnés (et leurs enfants) avec des valeurs d'index z positives (les valeurs supérieures sont empilées devant les valeurs inférieures; les éléments ayant la même valeur sont empilés en fonction de l'apparence dans le code HTML)
Mr_Moneybags
la source
3
Certains peuvent également trouver cela utile: Ce que personne ne vous a dit au sujet de Z-Index
Mentalist
450

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>
Développer l'extrait

Violon

stephenmurdoch
la source
14
updates.html5rocks.com/2012/09/… est une excellente référence sur la façon dont la position fixe, absolue et relative interagit avec z-index.
A fait
@marflar Mon plaisir. Btw, jetez un oeil à votre violon. il y a une balise supplémentaire </body>et une balise supplémentaire </html>à la fin.
Michel Ayres
2
Voici un violon démontrant le contexte d'empilement. C'est expliqué ici .
kdbanman
La suppression position: relativede l'élément over a en fait résolu mon problème.
Alex G
thanksssssss <3
Karl Anthony Baluyot
32

z-index ne fonctionne que dans un ie contexte particulier relative, fixedou la absoluteposition.

L'index z d'un div relatif n'a rien à voir avec celui z-indexd'un div absolument ou fixe.

EDIT Ceci est une réponse incomplète. Cette réponse fournit de fausses informations. Veuillez consulter le commentaire et l'exemple de @ Dansingerman ci-dessous.

cusimar9
la source
3
Pouvez-vous développer le fonctionnement de z-index dans un contexte particulier et / ou fournir une référence?
DanSingerman
13
L'index z affecte l'ordre de deux div même si l'un est relatif et l'autre absolu.
Raffael
65
Cette réponse est fausse. Voici un violon démontrant le contexte d'empilement tel qu'il est expliqué ici . @Dansingerman.
kdbanman
1
Merci pour votre jsFiddle @kbdanman, cela m'a aidé à comprendre le contexte d'empilement avec un visuel.
dhruvpatel
8
@JoeMorano, Higher z est plus proche du sommet, quel que soit le positionnement absolu ou relatif. Ce qui compte, c'est le niveau dans l'arborescence des documents. Les divisions 4, 5 et 6 sont les enfants de la division 3, tandis que les divisions 1 et 2 sont les frères et sœurs de la division 3. La division 1 a un z supérieur à la division 3, donc la division 1 est au-dessus de la division 3 et de tous ses enfants. Div 2 a un z inférieur à div 3, donc div 3 et tous ses enfants sont au-dessus de div 2
kdbanman
31

puisque votre overdiv 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 sur-div en relatif, donc il n'y a pas d'effets secondaires sur cette div et la sous-div obéira à votre volonté.

voici votre exemple sur jsfiddle: Fiddle

edit : Je vois que quelqu'un a déjà mentionné cette réponse!

je suis sérieux
la source
18

Donnez #underun négatif z-index, par exemple-1

Cela se produit car la z-indexpropriété 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-indexc'est 1pour les deux éléments quelle que soit la hauteur dans laquelle vous le placez #over.

En donnant #underune valeur négative, il sera derrière n'importe quel z-index: 1;élément, c'est-à-dire #over.

Carlos Precioso
la source
J'ai aussi eu ce problème - mettre la division «under» à 0 a fonctionné pour moi.
Mick Sear
5

Je construisais un menu de navigation. J'ai overflow: hiddendans le css de mon nav qui a tout caché. Je pensais que c'était un problème d'index z, mais vraiment je cachais tout en dehors de ma navigation.

thedanotto
la source
0

le comportement des éléments fixes (et des éléments absolus) tel que défini dans CSS Spec:

Ils se comportent lorsqu'ils sont détachés du document et placés dans le parent positionné fixe / absolu le plus proche. (pas une citation mot par mot)

Cela rend le calcul 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 body et en déplaçant tous ces éléments (qui sont classés comme "mes-fixes" à l'intérieur de cet élément au niveau du corps )

Bakhshi
la source