Tại sao chỉ mục z bị bỏ qua với vị trí: tĩnh?

Question

Xem nhận xét này from jquery-ui

// Ignore z-index if position is set to a value where z-index is ignored by the browser 
// This makes behavior of this function consistent across browsers 
// WebKit always returns auto if the element is positioned 

Tôi thấy rằng jquery của zIndex() trả về 0 nếu phần tử là position: static.

Không hỗ trợ chỉ mục z ở vị trí: tĩnh? (Nó hoạt động cho tôi trong Chrome, chưa thử nghiệm trên nhiều trình duyệt)

Answer 1

có nghĩa là "Bỏ qua tất cả các hướng dẫn định vị từ left, top, z-index, v.v ...".

'z-index' 
Value:  auto | <integer> | inherit 
Initial: auto 
Applies to:  positioned elements 

- http://www.w3.org/TR/CSS21/visuren.html#z-index

Một yếu tố được cho là được bố trí nếu tài sản 'vị trí' của nó có một giá trị khác hơn là 'tĩnh'.

- http://www.w3.org/TR/CSS21/visuren.html#positioned-element

Answer 2

z-index không được bỏ qua cho flex-mục (trẻ em trực tiếp của flex-container, phần tử với display: flex hoặc display: inline-flex). Từ w3c flexbox spec:

Flex items sơn giống hệt như khối inline CSS21, ngoại trừ việc order trật tự tài liệu -modified được sử dụng ở vị trí của trật tự tài liệu thô, và z-index giá trị khác hơn auto tạo ra một bối cảnh xếp chồng ngay cả khi position là static .

Vì vậy, giả sử chúng ta có cách bố trí này với chồng chéo (.flex-item-two chồng chéo .flex-item-one sử dụng lề ví dụ tiêu cực):

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex-item-one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: -50px; 
 
} 
 

 
.flex-item-two { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
}

<div class="flex"> 
 
    <div class="flex-item flex-item-one">One</div> 
 
    <div class="flex-item flex-item-two">Two</div> 
 
</div>

Nếu flex-item-one chỉ số lớn hơn .flex-item-two 's, .flex-item-one sau đó chồng chéo .flex-item-two.

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex-item-one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: -50px; 
 
    z-index: 1; 
 
} 
 

 
.flex-item-two { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
}

<div class="flex"> 
 
    <div class="flex-item flex-item-one">One</div> 
 
    <div class="flex-item flex-item-two">Two</div> 
 
</div>