看到這個評論from jquery-ui爲什麼z-index忽略位置：static？
// 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
我看到jQuery的zIndex()返回0，如果該元素是position: static。
z-index是否支持position：static？ （它爲我在Chrome中，還沒有測試跨瀏覽器）
因爲position: static的意思是「從left，top，z-index等忽略所有的定位指令」。
'z-index'
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements
- http://www.w3.org/TR/CSS21/visuren.html#z-index
一個元素表示，如果它的「位置」屬性具有比「靜態」以外的值，以進行定位。
- http://www.w3.org/TR/CSS21/visuren.html#positioned-element
z-index也是不可忽視的Flex的項目（柔性容器的直接子，元件相display: flex或display: inline-flex）。從w3c flexbox spec：
Flex items漆完全一樣，內嵌塊CSS21，除了
order修飾的文檔順序代替原文檔順序使用，並z-index值以外auto創建堆疊環境即使position是static。
所以假設我們有該佈局具有重疊（.flex-item-two使用例如負邊緣重疊.flex-item-one）：
.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>如果flex-item-one指數是大於.flex-item-two的，.flex-item-one然後重疊.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>
可能重複http://stackoverflow.com/questions/7814282/why-is-my-z-index-being-ignored – Dve
@Dve - 不是真的。這個問題的答案是「它不適用於靜態位置的元素。」我問**爲什麼**。 – ripper234