層疊樣式表/z-index

IE6/IE7 z-index 解決方法

在 IE7 及更低版本中，相對和絕對定位的元素的自動 z-index 為零。此外，IE 將 auto 的 z-index 評估為零。因此，位於不同容器中的兩個絕對定位元素無法重疊。如果其中一個父元素的 z-index 為 1，那麼它的子元素就可以與另一個容器的子元素重疊。對於下拉選單，請提升當前懸停專案的 z-index，而不是依賴選單本身的 z-index。

從最外層容器開始，為每個相對定位的 div 設定遞減的 z-index 值，以便標記中的根 div 具有最高值，並且其中的任何絕對定位的 div 具有最低的 z-index 值，這樣它們就不會在 IE6 中與靜態 div 重疊。

任何具有 haslayout 的相對定位元素都會建立一個堆疊上下文。如果兩個元素都是相對定位的，並且其中一個被設定為 z-index:1，那麼如果它們在 IE6/7 中重疊，它將被隱藏在第二個 div 下方。

為了讓模態對話方塊在 IE6 中重疊選擇元素，請為絕對定位的 div 使用正 z-index 值和 overflow:hidden;。然後將一個空的 iframe 插入到條件註釋中，作為絕對定位的 div 的子元素，並將其樣式設定為 position:absolute; top:0; left:0; z-index:-1; filter:mask(); 以及定義的寬度和高度。這是有效的，因為在 iframe 背後的選擇元素不會被 IE6 繪製，即使它不可見。

z-index 使用

每個 z-index 被指定為整數或其不透明度不等於 100% 的元素都會建立一個新的堆疊上下文，在這個上下文中，元素本身是其子元素的零 z-index，並且其子元素相對於彼此定位，但不能與容器外部的元素重疊。

如果一個相對定位的元素是 display:inline，那麼它的 left/right 和 top/bottom 偏移量將基於它的容器，而不是堆疊上下文。

auto 的 z-index 意味著元素不會為其子元素建立零 z-index，因此它們的 z-index 值相對於頁面上的其他元素。

如果兩個或多個兄弟元素在其父元素中具有相同的堆疊級別，那麼它們將按照它們在 HTML 標記中的出現順序從後到前呈現。

如果你想要一個 div 中的相對定位元素與另一個 div 中的相對定位元素重疊，你必須提升整個 div 的 z-index，或者將內容合併到一個容器 div 中。

如果你想要一個元素繪製在所有其他元素之上，但你想要該元素的子元素位於所有其他元素的後面，請使該元素成為唯一的相對定位元素，然後使用負 z-index 定位子元素。

如果你想要一個邊框顏色在相鄰表格單元格上重疊，請給該單元格一個比其他單元格更高的 z-index。使用零邊框寬度和更高的 z-index 來完全擦除邊框。

建立堆疊上下文的元素將與相鄰的浮動元素重疊，如果它們相交。

具有相同堆疊上下文的元素根據原始碼順序顯示；最後新增的標籤將與第一個新增的標籤重疊。