Remplacer CSS Z-Index de l'Empilement de Contexte
Je suis en train de remplacer /ignorer le contexte d'empilement pour un élément de sorte qu'il peut être positionné sur l'axe z par rapport à la page racine.
Toutefois, conformément à l'article Ce que personne Ne Vous a Dit à Propos de Z-Index:
Si un élément est contenu dans un empilement de contexte sur le bas de la pile, il n'y a aucun moyen de l'obtenir pour apparaître en face d'un autre élément dans un autre contexte d'empilement qui est plus élevé dans l'ordre d'empilement, même avec un z-index de un milliard de dollars!
De nouveaux contextes d'empilement peut être formé sur un élément dans l'une des trois façons 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 un z-index de valeur autre que auto
- Lorsqu'un élément a une valeur d'opacité de moins de 1
Avec l'exemple suivant:
CSS:
.red, .green, .blue { position: absolute; }
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
HTML:
<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 est donné opacity:.99;
, (ce qui crée un nouveau contexte d'empilement sur le premier nœud) alors même si .red
a z-index:1
, il sera toujours placé derrière les autres éléments, parce que c'est rendu comme la plus haute de l'élément dans la pile.
Travail de Démonstration dans jsFiddle
Qui ressemble à ceci:
Q: Est-il possible pour un élément d'ignorer le contexte de la pile de l'un de ses éléments parents et demander à être positionnées l'une par rapport à l'original du contexte de la pile de la page?
Vous devez vous connecter pour publier un commentaire.
Non, il n'est pas possible de transférer un élément positionné entre l'empilement des contextes sans déplacer l'élément dans le DOM. Vous ne pouvez même pas déplacer un élément à la racine de l'empilement de contexte à l'aide de
position: fixed
ouposition: absolute
(comme vous l'avez observé,.red
est positionné par rapport à son parent,div:first-child
parce qu'il crée un nouveau contexte d'empilement).Cela étant dit, compte tenu de votre code HTML et CSS il doit être facile à juste réaffecter les classes de la
div
éléments au lieu de cela, comme dans d'autres réponses et ici de sorte que tous vosdiv
s etspan
s participer à la racine de l'empilement de contexte:Mais votre situation n'est probablement pas aussi simple qu'il y paraît.
Comme il est indiqué dans le Le contexte d'empilement: "avec les z-index, l'ordre de rendu de certains éléments est influencée par leur z-index de la valeur. Cela se produit parce que ces éléments ont des propriétés particulières qui les amènent à former un empilement contexte.
De lever en partie l'empilement de problème de contenu, vous pouvez utiliser des propriétés css pour afficher les éléments indésirables:
ou