HTML: ¿Obtiene un elemento secundario para mostrar detrás (índice z más bajo) que su elemento primario?

Question

Necesito un determinado elemento dinámico para aparecer siempre encima de otro elemento, sin importar el orden en el árbol DOM que sean. es posible? Intenté z-index (con position: relative), y parece que no funciona. Odio ser vago, pero esta es la manera más simple que se me ocurre de hacer esta pregunta sin explicar su propósito, ad nauseum.

Así, para recapitular, necesito:

<div class="a"> 
    <div class="b"></div> 
</div> 

<div class="b"> 
    <div class="a"></div> 
</div> 

Para mostrar exactamente lo mismo cuando se representa. Y para fines de flexibilidad (estoy planeando distribuir un complemento que necesite esta funcionalidad), me gustaría no tener que recurrir a un posicionamiento absoluto o fijo. Adición: Por lo que vale la pena, para realizar la función que yo quería, hice una declaración condicional donde el elemento secundario superpuesto se volvería transparente en el caso de que estuviera bloqueando la vista de su elemento primario. No es perfecto, pero es algo.

Answer 1

Si los elementos forman una jerarquía, no se puede hacer de esa manera, porque cada elemento posicionado crea un nuevo stacking context, y el índice z es relativo a los elementos del mismo contexto de apilamiento.

Answer 2

lo que necesita es position: absolute para que el índice z funcione.

también deberá configurar las propiedades left y top css para colocar el elemento en el lugar correcto. Probablemente necesites hacer esto con javascript.

Answer 3

He tenido éxito usando lo siguiente.

z-index: -1;

Answer 4

Descubrí una forma de colocar realmente el elemento secundario detrás de su elemento creando un pseudo-elemento que imita al padre. Útil para cosas como menús desplegables - ¡espero que ayude, usuario de hace ocho años!

https://jsfiddle.net/x7up68s2/7/

.container > div { 

    // will be beyond its child 
    background-color: red; 
    width: 150px; 
    height: 50px; 
    z-index: 10; 

    // will be above its "child" 
    &:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: red; 
    z-index: 7; 
    top: 10px; 
    } 
} 

.a > .b, 
.b > .a { 
    z-index: 5; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: teal; 
}