come usare z-index con posizionamento relativo?

Question

Ho un problema serio con z-index e il mio codice. Voglio avere un popup su ogni riga e posizionato rispetto a quella riga. Così ho creato questo codice:

<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 seguente stile

.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; 
} 

so che sto facendo qualcosa di molto sbagliato, ma io non trovo la mia stupidità.

Answer 1

Quando si imposta position: relative su un elemento, si stabilisce un nuovo blocco contenitore. Tutto il posizionamento all'interno di quel blocco è rispetto ad esso.

L'impostazione di z-index su un elemento all'interno di quel blocco modificherà il suo livello solo rispetto ad altri elementi all'interno dello stesso blocco.

Non sono a conoscenza di alcun intervento.

Answer 2

È possibile utilizzare z-index con la posizione relative. Hai solo bisogno di specificare position: relative. Se si vuole veramente a guardare come si è popping up, io suggerisco di usare 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

prova ad aggiungere z-index con valori negativi per i div schiena