over - Sobrescribir el contexto de apilamiento del índice Z de CSS
z-index position absolute (2)
Estoy intentando anular / ignorar el contexto de apilamiento de un elemento para que pueda colocarse en el eje z en relación con la raíz de la página.
Sin embargo, según el artículo Lo que nadie te dijo sobre Z-Index :
Si un elemento está contenido en un contexto de apilamiento en la parte inferior del orden de apilamiento, no hay forma de que aparezca delante de otro elemento en un contexto de apilamiento diferente que sea superior en el orden de apilamiento, incluso con un índice z de mil millones!
Los nuevos contextos de apilamiento se pueden formar en un elemento de una de tres maneras:
- Cuando un elemento es el elemento raíz de un documento (el elemento)
- Cuando un elemento tiene un valor de posición distinto de estático y un valor de índice z distinto de automático
- Cuando un elemento tiene un valor de opacidad menor que 1
Con el siguiente ejemplo:
.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 al primer div se le da opacity:.99; , (lo que crea un nuevo contexto de apilamiento en el primer nodo) luego, si .red tiene z-index:1 , aún se colocará detrás de los otros elementos porque solo se representa como el elemento más alto dentro de esa pila.
Demo de trabajo en jsFiddle
Que se parece a esto:
P : ¿Hay una manera para que un elemento ignore el contexto de pila de cualquiera de sus elementos principales y pida que se coloque en relación con el contexto de pila original de la página?
P : ¿Hay una manera para que un elemento ignore el contexto de pila de cualquiera de sus elementos principales y pida que se coloque en relación con el contexto de pila original de la página?
No, no es posible transferir un elemento posicionado entre contextos de apilamiento sin reposicionar el elemento en el DOM. Ni siquiera puede mover un elemento al contexto de apilamiento de raíz utilizando position: fixed o position: absolute (como ha observado, .red se está posicionando con respecto a su padre, div:first-child porque crea un nuevo contexto de apilamiento).
Dicho esto, dado su HTML y CSS, debería ser trivial simplemente reasignar las clases a los elementos div lugar, como se muestra en otras respuestas y here para que todos sus div sy span s participen en el contexto de apilamiento de raíz:
<div class="red"><span>Red</span></div>
<div class="green"><span>Green</span></div>
<div class="blue"><span>Blue</span></div>
Pero tu situación probablemente no sea tan simple como parece.
Como se indica en El contexto de apilamiento : "Al usar el índice z, el orden de representación de ciertos elementos se ve influenciado por su valor del índice z. Esto ocurre porque estos elementos tienen propiedades especiales que hacen que formen un contexto de apilamiento.
Para superar parcialmente el problema del contenido de apilamiento, puede usar las propiedades css para mostrar elementos no deseados:
opacity: 0.1;
o
display: none;