cómo usar z-index con posicionamiento relativo?

Question

Tengo un problema serio con z-index y mi código. Quiero tener una ventana emergente en cada fila y posicionada en relación con esa fila. Así que creé este código:

<div class="level1"> 
    <div class="level2"> 
     <input type="text" value="test1" /> 
     <div class="popup">test1</div> 
    </div> 
    <div class="level2"> 
     <input type="text" value="test2" /> 
     <div class="popup">test2</div> 
    </div> 
</div> 

con Te siguiente estilo

.level1 
{ 
    position:relative; 
    z-index:2; 
} 
.level2 
{ 
    position:relative; 
    z-index:3; 
} 
.popup 
{ 
    position:absolute; 
    left:0px; 
    top:10px; 
    width:100px; 
    height:100px; 
    background:yellow; 
    z-index:4; 
} 

Yo sé que estoy haciendo algo muy mal, pero no encuentro mi estupidez.

Answer 1

Cuando establece position: relative en un elemento, establece un nuevo bloque contenedor. Todo posicionamiento dentro de ese bloque es con respecto a eso.

Establecer z-index en un elemento dentro de ese bloque solo alterará su capa con respecto a otros elementos dentro del mismo bloque.

No tengo conocimiento de ninguna solución temporal.

Answer 2

Puede usar z-index con la posición relative. Solo necesita especificar position: relative. Si realmente quiere que se vea como que está surgiendo, se sugiere emplear box-shadow

.popup { 
    position:relative; 
    left: 0px; 
    top: 10px; 
    width: 100px; 
    height: 100px; 
    background:yellow; 
    z-index: 4; 

    -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
} 

Answer 3

intento de añadir z-índice con valores negativos a los divs espalda