¿Es posible tener un elemento hijo detrás de su elemento primario con z-index

Question

Me gustaría saber si es posible tener un elemento hijo detrás de su elemento primario con z-index. Me gustaría utilizar el div principal como capa de color transparente sobre su contenido.

Gracias

Answer 1

no es posible, debido a que cada elemento posicionado crea un contexto de pila.

Explanation 1, Explanation 2

Answer 2

Se podía hacerlo a la inversa y utilizar al niño como la superposición como esto

HTML

<div id="stuff"><div class="overlay"></div> 
    <p> 
    Cras venenatis ornare tincidunt. Nam laoreet ante sed nibh pretium nec gravida turpis dapibus. Curabitur lobortis; lacus sit amet rutrum aliquet, est massa feugiat lectus, bibendum eleifend velit metus vitae dolor! Duis vulputate mi vitae quam fermentum pharetra. 
    </p> 
</div> 

CSS

#stuff{ 
    position:relative; 
    } 

.overlay{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    background:#ACA; 
    opacity:0.4; 
    } 

Answer 3

Si bien esto no necesariamente funcionaría en todos los navegadores (espe cialmente los más antiguos), a continuación se ha trabajado para mí en el pasado:

#child { 
    position: relative; 
    z-index: -1; 
    ... 
} 

estoy realmente sólo sugiriendo esto como un último recurso y seguirían prefiriendo utilizar cualquier técnica que no sea esto, aunque podría ser ideal en tu escenario

Answer 4

La respuesta corta es Sí;) Aquí hay un excelente artículo que describe cómo puede usar el orden de apilamiento de los elementos para permitir que el índice z sea negativo para colocar un elemento detrás de su elemento primario.

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 5

Por qué no? Claro que puede, y es fácil:

1. dar una posición no estática a los elementos que desee;
2. conjunto z-index de niño a -1;
3. crear un contexto de pila en el contenedor principal (estableciendo en ella un z-index, opacity, transforms o whatelse genera una capa de material compuesto).

.container { 
 
    position: absolute; 
 
    z-index: 0; /* or eg. opacity: 0.99;*/ 
 
    
 
    background-color: blue; 
 
    color: lightblue; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.parent { 
 
    position: relative; 
 
    
 
    background-color: rgba(100, 255, 150, 0.75); 
 
    color: green; 
 
    width: 50%; 
 
    height: 30%; 
 
    top: 30%; 
 
    left: 20%; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    z-index: -1; 
 
    
 
    background-color: orange; 
 
    color: yellow; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: -50%; 
 
    left: 20%; 
 
}

<div class="container"> 
 
    <span>container</span> 
 
    <div class="parent"> 
 
     <span>parent</span> 
 
     <div class="child"> 
 
      <span>child</span> 
 
     </div> 
 
    </div> 
 
</div>

(si el padre se utiliza como una capa transparente, asegúrese de usar un background-image o RGBA background-color: niños heredan el opacity de los padres)