Chỉ số Z không hoạt động như mong đợi với định vị tuyệt đối bên trong một phần tử vị trí cố định

Question

Tôi có một hoặc nhiều thành phần vị trí cố định trên một trang hiển thị xếp chồng lên nhau (có nghĩa là, phần trên cùng của phần thứ hai là đặt phần cuối của phần đầu tiên - không có xếp hạng z-index của các phần tử đó). Bên trong phần tử vị trí cố định đầu tiên, có một phần tử được định vị hoàn toàn cao hơn so với phần tử cố định của nó, do đó nó mở rộng ra ngoài phần dưới cùng của bố mẹ cố định đó.

Sự cố là phần tử vị trí cố định tiếp theo được hiển thị trên đầu phần tử được định vị hoàn toàn. Tôi đã có giá trị z-index cao hơn được đặt trên phần tử được định vị hoàn toàn hơn so với các phần tử cố định vị trí, nhưng nó bị bỏ qua hoàn toàn.

Để giúp làm sáng tỏ vấn đề, tôi đặt lại với nhau ví dụ này:

HTML

<div class="fixed first"> 
    <p>This is a fixed element</p> 
    <p class="abs"> 
     I should be displayed above both fixed position elements 
    </p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div> 

CSS

.fixed { 
    font-size: 16px; 
    background: #eee; 
    border-bottom: 1px solid #ccc; 
    position: fixed; 
    height: 3em; 
    width: 100%; 
    z-index: 1; 
} 

.abs { 
    position: absolute; 
    background: #acc; 
    height: 6em; 
    top: 0; 
    left: 25%; 
    width: 50%; 
    z-index: 2; 
} 

.second { 
    top: 3.0625em; 
} 

Dưới đây là ví dụ làm việc trên JSFiddle:

http://jsfiddle.net/GS4E4/8/

Tôi là loại bối rối bởi điều này. Có ai có một lời giải thích là tại sao điều này đang xảy ra, và một cách để làm việc xung quanh nó?

Answer 1

Như bình luận của Pete, tất cả đều đi vào bối cảnh xếp chồng. Trong trường hợp này, cả hai yếu tố .fixed đều tạo ra bối cảnh xếp chồng của riêng mình nhờ vào việc là position: fixed;. Con của phần tử .fixed đầu tiên tạo ngữ cảnh xếp chồng lồng nhau trong phần tử gốc. Bởi vì nó được lồng trong một bối cảnh xếp chồng hiện có, nó không bao giờ có thể thoát ra và ngăn xếp bất kỳ thứ gì cao hơn; chỉ số z của nó là tương đối so với chỉ mục của nó ngay bây giờ.

Thông số này thực sự có phần hữu ích với các chi tiết cụ thể: http://www.w3.org/TR/CSS2/visuren.html#z-index. Bạn có thể nhìn thấy thông qua danh sách được đánh số mà các bối cảnh xếp chồng con được sơn chết cuối cùng.

Vì vậy, trong trường hợp của bạn, yếu tố .fixed.first của bạn sẽ cần phải có chỉ mục z là 2 để con mình có thể xếp chồng trên đỉnh .fixed.second.

Answer 2

Di chuyển .abs bên ngoài cả hai div.

<div class="fixed first"> 
    <p>This is a fixed element</p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div> 
<p class="abs"> 
     I should be displayed above both fixed position elements 
    </p> 

Xem http://jsfiddle.net/GS4E4/9/ Cách bạn có nó bây giờ .abs là vị trí tương đối so với .first vì vậy nó sẽ ngồi trên .first nhưng không phải trên .second, fiddle của bạn được giải thích một cách chính xác.