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)

366
demandé sur Community 2011-03-07 14:09:36

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

  1. l'élément racine du contexte d'empilage (l'élément <html> élément dans ce cas)
  2. é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)
  3. éléments Non positionnés (ordonnés par apparence dans le HTML)
  4. éléments positionnés (et leurs enfants) avec une valeur d'index en z d'auto (Classés par apparence dans le HTML)
  5. é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

  1. définit un indice z de -1, pour #under positionné-l'indice z De ve apparaît derrière "Non positionné #over élément
  2. 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.

  1. 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
  2. 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:

  1. 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
  2. é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)
  3. éléments Non positionnés (ordonnés par apparence dans le HTML)
  4. 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)
  5. é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)
78
répondu Mr_Moneybags 2017-02-06 20:28:36

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>

Violon

421
répondu stephenmurdoch 2016-10-24 23:25:46

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.

37
répondu cusimar9 2017-08-15 17:52:54

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!

28
répondu iamserious 2014-01-26 13:04:17

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 .

18
répondu Carlos Precioso 2012-07-02 13:34:58

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.

4
répondu thedanotto 2017-01-11 23:37:38

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

3
répondu Khoa Nguyen 2013-05-26 04:37:30

il suffit de regarder dans MDN documentation . Il est la meilleure explication que j'ai jamais vu.

2
répondu kraag22 2017-03-07 16:22:23

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)

0
répondu Bakhshi 2013-06-11 05:10:03