web-dev-qa-db-fra.com

Remplacer le contexte d'empilement d'index Z CSS

J'essaie de remplacer/ignorer le contexte d'empilement d'un élément afin qu'il puisse être positionné sur l'axe des z par rapport à la racine de la page. 

Cependant, selon l'article Ce que personne ne vous a dit à propos de Z-Index :

Si un élément est contenu dans un contexte d'empilement au bas de l'ordre d'empilement, il n'existe aucun moyen de le faire apparaître devant un autre élément dans un contexte d'empilement différent qui est plus élevé dans l'ordre d'empilement, même avec un z-index. d'un milliard!

De nouveaux contextes d'empilement peuvent être formés sur un élément de l'une des trois manières suivantes:

  • Lorsqu'un élément est l'élément racine d'un document (l'élément)
  • 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

Avec l'exemple suivant:

.red, .green, .blue { position: absolute; }
.red   { background: red; }
.green { background: green; }
.blue  { background: blue; }
<div><span class="red">Red</span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>

Si le premier div reçoit opacity:.99;, (ce qui crée un nouveau contexte de pile sur le premier nœud), alors même si .red a z-index:1, il sera toujours placé derrière les autres éléments car il est simplement rendu comme l'élément le plus élevé dans cette pile.

Démo de travail dans jsFiddle

Qui ressemble à ceci:

demo

Q: Y a-t-il un moyen pour un élément d'ignorer le contexte de pile de l'un de ses éléments parents et de demander à être positionné par rapport au contexte de pile d'origine de la page?

csscss3z-index
22
KyleMit

Q: Y a-t-il un moyen pour un élément d'ignorer le contexte de pile de l'un de ses éléments parents et de demander à être positionné par rapport au contexte de pile d'origine de la page?

Non, il n'est pas possible de transférer un élément positionné entre des contextes d'empilement sans repositionner l'élément dans le DOM. Vous ne pouvez même pas déplacer un élément dans le contexte d'empilement racine à l'aide de position: fixed ou position: absolute (comme vous l'avez déjà constaté, .red est positionné par rapport à son parent, div:first-child car il crée un nouveau contexte d'empilement).

Cela étant dit, étant donné votre code HTML et CSS, il devrait être simple de réaffecter les classes aux éléments div, comme indiqué dans d'autres réponses et ici afin que tous vos divs et spans participent au contexte d'empilement racine:

<div class="red"><span>Red</span></div>
<div class="green"><span>Green</span></div>
<div class="blue"><span>Blue</span></div>

Mais votre situation n'est probablement pas aussi simple qu'il y paraît.

21
BoltClock

Comme indiqué dans le Le contexte d'empilement : "À l'aide de z-index, l'ordre de rendu de certains éléments est influencé par la valeur de leur z-index. Cela est dû au fait que ces éléments ont des propriétés spéciales qui les forcent à former un contexte d'empilement. .

Pour résoudre en partie le problème d'empilement du contenu, vous pouvez utiliser les propriétés css pour afficher les éléments indésirables:

opacity: 0.1;

ou

display: none;
0
Roman