Cómo hacer que un elemento principal aparezca sobre el niño

Tengo dos elementos CSS nesteds. Necesito que el padre esté en la parte superior, es decir, arriba en el eje z, del elemento hijo. Solo establecer z-index no es suficiente.

No puedo establecer un índice z negativo en el elemento secundario, que lo configurará debajo del contenedor de la página en mi página real. ¿Es este el único método?

.parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: 1; } .child { position: absolute; background-color: blue; z-index: 0; color: white; top: 0; } .wrapper { position: relative; background: green; z-index: 10; } 
 
parent parent
child child child

Establezca un z-index negativo para el elemento secundario y elimine el conjunto uno en el elemento primario.

 .parent { position: relative; width: 350px; height: 150px; background: red; border: solid 1px #000; } .parent2 { position: relative; width: 350px; height: 40px; background: red; border: solid 1px #000; } .child { position: relative; background-color: blue; height: 200px; } .wrapper { position: relative; background: green; height: 350px; } 
 
parent 1 parent 1
child child child
parent 2 parent 2

Afortunadamente, existe una solución. Debe agregar un contenedor para primario y cambiar el índice z de este contenedor por ejemplo 10, y establecer z-index para el hijo en -1:

 .parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: initial; } .child { position: relative; background-color: blue; z-index: -1; color: white; } .wrapper { position: relative; background: green; z-index: 10; } 
 
parent parent
child child child

Algunas de estas respuestas funcionan, pero establecen la position: absolute; y z-index: 10; parecía bastante fuerte solo para lograr el efecto requerido. Descubrí que lo siguiente era todo lo que se necesitaba, aunque desafortunadamente no pude reducirlo más.

HTML:

 
...

CSS:

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

Utilicé esta técnica para lograr un efecto de desplazamiento con borde para enlaces de imágenes. Aquí hay un poco más de código, pero usa el concepto anterior para mostrar el borde sobre la parte superior de la imagen.

http://jsfiddle.net/g7nP5/

Como tus divs son position:absolute , en realidad no están nesteds en lo que a posición se refiere. En su página jsbin cambié el orden de los divs en el HTML a:

 

y el cuadro rojo cubría el cuadro azul, que creo que es lo que estás buscando.

Lo rompió. Básicamente, lo que sucede es que cuando establece el índice z en negativo, en realidad ignora el elemento padre, esté posicionado o no, y se ubica detrás del siguiente elemento posicionado, que en su caso era su contenedor principal. Por lo tanto, debe colocar su elemento padre en otro div posicionado, y su div hijo se sentará detrás de eso.

Trabajar en eso fue un salvavidas para mí, ya que mi elemento padre específicamente no podía ser posicionado, para que mi código funcione.

Encontré todo esto increíblemente útil para lograr el efecto que se indica aquí: Usar solo CSS, mostrar div en el control deslizante sobre

Debería usar position:relative o position:absolute tanto en el padre como en el hijo para usar z-index .

estilo:

 .parent{ overflow:hidden; width:100px; } .child{ width:200px; } 

cuerpo: