jak korzystać z indeksu z względnym pozycjonowaniem?

Question

Mam poważny problem z z-index i moim kodem. Chcę mieć wyskakujące okienko w każdym wierszu i pozycjonowane względem tego wiersza. Więc stworzyłem ten kod:

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

TE poniższej stylu

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

wiem, że robi coś bardzo złego, ale nie znajdę moją głupotę.

Answer 1

Po ustawieniu position: relative na elemencie, ustanawia się nowy blok zawierający. Całe pozycjonowanie wewnątrz tego bloku jest w stosunku do niego.

Ustawienie indeksu Z na elemencie wewnątrz tego bloku zmieni tylko jego warstwę w odniesieniu do innych elementów w tym samym bloku.

Nie jestem świadomy żadnych problemów związanych z pracą.

Answer 2

Możesz użyć z-index z pozycją relative. Musisz tylko określić position: relative. Jeśli naprawdę chcesz, żeby wyglądało, że jest pojawiały się, Proponuję za pomocą 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

spróbuj dodać z-index z wartości ujemnych do div tylnych