Tại sao chỉ mục z: -1; xuất hiện trên z-index: 1 ;?

Question

Giải thích hành vi này:

<div style="z-index: 1"></div> 
<div></div> 
<div></div> 
<div></div> 

div { 
    position: relative; 
    background: red; 
    width: 100px; 
    height: 100px;  
} 

div:before { 
    position: absolute; 
    background: blue; 
    width: 100px; 
    height: 100px; 
    z-index: -1; 
    content: ""; 
    left: -5px; 
    top: -5px; 
} 

http://jsfiddle.net/2VexH/2/

Chỉ khác biệt là div đầu tiên có z-index: 1 bộ.

Answer 1

Đặt thành phần của vị trí là z-index thành bất kỳ mục nào khác ngoài auto (giá trị ban đầu) làm cho phần tử tạo ngữ cảnh xếp chồng mới cho các hộp con cháu của nó.

Điều này ngăn cản bất kỳ hậu duệ nào của nó xuất hiện bên dưới nó, bao gồm div:before phần tử giả, ngay cả khi z-index của chúng là số âm. Tất nhiên, bất kỳ hậu duệ nào có số âm z-index sẽ tiếp tục xuất hiện bên dưới một hậu duệ có sốkhông hoặc dương trong phần tử có chứa, nhưng phần tử chứa đó sẽ luôn ở phía sau.

Phần còn lại của div yếu tố của bạn mà không có một bộ z-index sẽ sử dụng giá trị ban đầu thay vào đó, và do đó không tạo ra ngữ cảnh xếp chồng cho pseudo-yếu tố của họ, cho phép giả yếu tố xuất hiện phía dưới thực các yếu tố. Thay vào đó, bối cảnh xếp chồng mà chúng được vẽ là của body.

---

_{Lưu ý rằng nội dung của một gốc ngữ cảnh xếp chồng vẫn sẽ xuất hiện trên nền của một hậu duệ với một âm z-index. Đây là mục đích và được đề cập chi tiết hơn trong this answer, với các liên kết có liên quan đến thông số kỹ thuật.}