web-dev-qa-db-fra.com

z-index ne fonctionne pas avec un positionnement fixe

J'ai un div avec un positionnement par défaut (c'est-à-dire position:static) et un div avec une position fixed.

Si je règle 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>

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

Je peux contourner ce problème en utilisant position:absolute sur 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 l'indice z ) mais elle n'a pas de réponse satisfaisante, c'est pourquoi je pose la question ici avec l'exemple de code)

cssz-index
394
DanSingerman

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

Solutions

L'élément <html> est votre seul contexte d'empilement. Il vous suffit donc de suivre les règles d'empilement dans un contexte d'empilement pour voir que les éléments sont empilés dans cet ordre.

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

Afin que vous puissiez

  1. définir un z-index de -1, pour #under positionné -ve z-index apparaissent derrière l'élément #over non positionné
  2. définissez la position de #over sur relative pour que la règle 5 lui soit appliquée

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’élément <html> est l’élément racine et constitue le premier contexte de superposition.
  2. Ordre d'empilement dans un contexte d'empilement

Les règles de contexte d'empilement et d'ordre 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'élément <html>)
  • Lorsqu'un élément a une valeur de position autre que statique et une valeur z-index autre que auto
  • Lorsqu'un élément a une valeur d'opacité inférieure à 1
  • Plusieurs nouvelles propriétés CSS créent également des contextes d'empilement. Ceux-ci comprennent: les transformations, les filtres, les régions css, les supports 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.

Stacking Order dans un contexte d'empilement

L'ordre des éléments:

  1. L'élément racine du contexte d'empilement (l'élément <html> 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 d'é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'indice z négatives (les valeurs les plus élevées sont empilées devant les valeurs les plus basses; les éléments avec 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 code HTML)
  4. Éléments positionnés (et leurs enfants) avec une valeur z-index de auto (classés par apparence dans le code HTML)
  5. Éléments positionnés (et leurs enfants) avec des valeurs d'indice z positives (les valeurs les plus élevées sont empilées devant les valeurs les plus basses; les éléments avec la même valeur sont empilés en fonction de l'apparence dans le code HTML)
121
Mr_Moneybags

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

438
stephenmurdoch

z-index ne fonctionne que dans un contexte particulier, à savoir relative, fixed ou absolute position.

z-index pour un div relatif n'a rien à voir avec le z-index d'un div absolu ou fixe.

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

34
cusimar9

puisque votre over div n'a pas de positionnement, le z-index ne sait pas où et comment le positionner (et par rapport à quoi?). Changez simplement la position de votre over div en relative, afin qu’il n’y ait aucun effet secondaire sur cette div et que le div div obéit à votre volonté.

voici votre exemple sur jsfiddle: Fiddle

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

29
iamserious

Donnez au #under un z-index négatif, par exemple. -1

Cela est dû au fait 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, quelle que soit la hauteur que vous avez définie dans #over.

En attribuant une valeur négative à #under, il se trouvera derrière tout élément z-index: 1;, c.-à-d. #over.

18
Carlos Precioso

Je construisais un menu de navigation. J'ai overflow: hidden dans le css de mon navigateur qui cachait tout. Je pensais que c'était un problème d'index z, mais en réalité je cachais tout en dehors de ma navigation.

5
thedanotto

Lorsque des éléments sont positionnés en dehors du flux normal, ils peuvent chevaucher d'autres éléments.

selon la section sur les éléments se chevauchant sur http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

3
Khoa Nguyen

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

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

Cela complique un peu le calcul zindex. J'ai résolu mon problème (même situation) en créant de manière dynamique un conteneur dans un élément body et en déplaçant tous ces éléments (classés comme "my-fixed-ones" dans cet élément de niveau corporel). )

0
Bakhshi