cách sử dụng z-index với vị trí tương đối?

Question

Tôi gặp vấn đề nghiêm trọng với chỉ mục z và mã của tôi. Tôi muốn có một popup trên mỗi hàng và vị trí tương đối so với hàng đó. Vì vậy, tôi đã tạo ra mã này:

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

với te phong cách sau đây

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

Tôi biết tôi đang làm một cái gì đó rất sai, nhưng tôi không tìm thấy sự ngu dốt của tôi.

Answer 1

Khi bạn đặt position: relative trên một phần tử thì bạn thiết lập một khối chứa mới. Tất cả các vị trí bên trong khối đó là đối với nó.

Đặt z-index trên một phần tử bên trong khối đó sẽ chỉ thay đổi lớp của nó đối với các phần tử khác trong cùng một khối.

Tôi không biết bất kỳ công việc nào xung quanh.

Answer 2

Bạn có thể sử dụng z-index với vị trí relative. Bạn chỉ cần chỉ định position: relative. Nếu bạn thực sự muốn nó trông giống như nó được nảy lên, tôi đề nghị sử dụng 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

thử thêm z-index với các giá trị tiêu cực đến divs lại