為什麼我的 Div 堆疊順序在 IE6 和 7 中表現不同？

Internet Explorer 6 和7 Z-Index 問題

問題：
在包含兩個的網頁中divs, div#sign-post 應出現在div#bottom 上方，但這僅發生在Internet Explorer (IE) 以外的瀏覽器中6 和 7。此外，IE6 在 div#bottom 的頂部顯示了額外的 198 個像素。

解決方案：

了解IE6 中的Z-Index/ 7

在大多數瀏覽器中，z -index 屬性允許元素根據分配的值堆疊在其他人的上方或下方。然而，在 IE6 和 7 中，無論 z-index 值如何，定位元素都會建立新的堆疊上下文。

問題

在這種情況下，div#sign-post 有z-index 比div#bottom 更高，但IE6/7 會比較其父級的堆疊上下文，在IE 中，父級的堆疊上下文是由定位元素本身所建立的。由於 div#sign-post 和 div#bottom 都沒有明確設定 z-index 值，因此文件順序決定了它們的堆疊，導致 div#bottom 出現在頂部。

解決方法：

要解決此問題，需要將 z-index 值分配給受影響的祖先的定位元素。

1. 辨識建立堆疊上下文的定位祖先。
2. 使用 JavaScript 或 CSS 為這些祖先分配高 z 索引，強制實作所需的堆疊順序。

例如，如果 div#parent 包含 div#sign-post，則為 div#parent 指定 z-index 1000將其放置在 div#bottom 上方。

額外的 IE6 問題

IE6 中 div#bottom 頂部額外的 198 像素是由於其內部計算預設保證金。這個問題可以透過明確設定 div#bottom 的邊距為 0px 來解決。

以上是為什麼我的 Div 堆疊順序在 IE6 和 7 中表現不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！