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:

Remplacer CSS Z-Index de l'Empilement de Contexte

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?

InformationsquelleAutor KyleMit | 2013-11-08