web-dev-qa-db-fra.com

Z-Index relatif ou absolu?

J'essaie de trouver une réponse à la question suivante:

Le style d'index z d'un élément est-il son ordre de pile absolu ou son ordre de pile par rapport à son parent?

Par exemple, supposons que j'ai le code suivant:

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

Lequel sera devant - #dHello ou #dDomination?

C'est juste pour des exemples. J'ai essayé cela à plusieurs endroits et les résultats semblent varier. Je vois si quelqu'un connaît une source autorisée pour régler:

1) Quelles sont les normes actuelles concernant z-index (sur ce sujet en particulier)? 2) Comment les navigateurs individuels varient-ils dans leur mise en œuvre réelle?

Merci!

csspositioningz-index
33
Tom Murray

z-index est relatif. Voir cette réponse détaillée , que j'ai écrit pour une question similaire.

Si aucun des autres éléments n'a un z-index défini, utilisez z-index: 1 ira bien. 

Modèle: Comment le z-index est-il déterminé?

                                         z-index
<div id=A>                                Auto 1
    <div id=B>                            Auto 1.1
       <div id=C style="z-index:1"></div>          Manual 1
       <div id=D></div>                   Auto 1.1.2
    </div>                                
    <div id=E></div>                      Auto 1.2
</div>
<div id=F></div>                          Auto 2

Tout d'abord, le direct les nœuds enfants du corps sont parcourus. Deux éléments sont rencontré: #A et #F. Celles-ci se voient attribuer un indice z de 1 et 2. Ceci Cette étape est répétée pour chaque élément (enfant) du document.

Ensuite, les propriétés définies manuellement z-index sont vérifiées. Si deux Les valeurs z-index sont égales, leur position dans l’arbre du document est. par rapport.

Votre cas: 

<div id=X style="z-index:1">          Z-index 1
    <div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div>    Z-index 2

Vous vous attendez à ce que #Y soit chevauchement #Z, car un z-index de 3 est clairement supérieur à 2. Eh bien, vous avez tort: ​​#Y est un enfant de #X, avec un z-index de 1. Deux est supérieur à un, et ainsi, #Z sera affiché sur #X (et #Y).

Voici un plunker pour visualiser ceci un peu mieux , ou essayez l'extrait ci-dessous , 

.redbox,
.greenbox,
.bluebox {
  height: 100px;
  width: 100px;
  position: relative;
  color: #fff;
  padding: 3px;
}

.redbox {
  background: red;
  z-index: 1;
}

.greenbox {
  background: green;
  top: 40px;
  left: 40px;
  z-index: 3;
}

.bluebox {
  background: blue;
  top: -20px;
  left: 20px;
  z-index: 2;
}
<div id=X class='redbox'>z: 1
  <div id=Y class='greenbox'> z: 3</div>
</div>
<div id=Z class='bluebox'>z: 2</div>

60
Rob W

Cependant, z-index ne fonctionne que si cet élément a la valeur position: relative; Si ce même élément avait un enfant avec position: relative; et que le z-index était défini plus haut, l’enfant s’afficherait au-dessus de son parent.

Il contient donc des éléments d'ordre de pile «absolu» et «relatif», tels que vous les avez formulés.

Je pense que tous les navigateurs traitent quasiment la même chose.

8
Chris G.

Par exemple:

  <!DOCTYPE html>
<html>
<head>
<style>

.x1 {
    position:relative;
    width:100%;
    clear:both;
    display:block;
  z-index:1000;
}

.x2 {
    position:fixed;
    width:100%;
    height:50px;
    background-color:#ff0000;
}

.x3 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#888;
}
.x4 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}
.x5 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#ff00ff;
}
.x6 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}

</style>

</head>
<body>
<div class='x1'>this class is relative
<div class='x2'>this class is fixed</div>
</div>

<div class='x3'>x3: this class is relative</div>
<div class='x4'>x4: this class is relative</div>
<div class='x5'>x5: this class is relative</div>
<div class='x6'>x6: this class is relative</div>
<div class='x3'>x3: this class is relative</div>

</body>
</html>
0
Ali Paeizi

Voici la spécification du W3C pour z-index .

Je pense que la ligne la plus importante, basée sur votre question est la suivante:

L'ordre dans lequel l'arbre de rendu est peint sur la toile est décrit en termes de contextes d'empilement. Les contextes d'empilement peuvent contenir d'autres contextes d'empilement. Un contexte d'empilement est atomique à partir du point de vue de son contexte d'empilement parent; boîtes dans un autre empilement les contextes peuvent ne pas se trouver entre ses cases.

Cela semble indiquer que rien ne peut être tracé entre le div avec z-index: -100 et le div avec z-index: 200.

0
Chris Marasti-Georg