為什麼 Internet Explorer 7 中的 Z 索引行為會有所不同？

IE7 Z-Index 分層問題：全面了解

Internet Explorer 7 (IE7) 對於z-index 屬性有一個特殊的行為，它負責確定網頁上元素的堆疊順序。此行為可能會導致意外的分層問題，尤其是在處理多個重疊元素時。

IE7 中的 Z 索引有什麼問題？

在 IE7 中，z -index 屬性與同一堆堆疊上下文中的元素相關。然而，與大多數瀏覽器不同，IE7 為任何定位元素建立一個新的堆疊上下文，而無需明確設定 z-index 值。這意味著，如果 z 索引較低的元素屬於不同的堆疊上下文，則它們可以與 z 索引較高的元素重疊。

實際範例

考慮以下範例HTML 和CSS 程式碼：

Input #1:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

在此範例中，我們想要選單（🎜>

在此範例中，我們想要選單（第一包絡的

元素)與第二包絡重疊。然而，在 IE7 中，第二個信封與選單重疊，因為定位的 沒有明確 z-index 會建立一個新的堆疊上下文。 可能的解決方案
要解決這個問題，有兩種主要方法：

1. 向父級添加顯式 Z索引元素：
   這會強制父元素的所有子元素（包括選​​單）與父元素的所有同級元素重疊。在我們的範例中，以下 CSS 將解決該問題：

   #envelope-1 {
       position: relative;
       z-index: 1;
   }

2. 從父元素中刪除position:relative：
   如果可能，從父元素中刪除position:relative屬性（我們範例中的）以避免建立新的堆疊上下文。這樣，菜單就會自然地與第二個信封重疊。修改後的 HTML 程式碼如下圖所示：

   
       <title>Z-Index IE7 Test</title>
       <style type="text/css">
           ul {
               background-color: #f00;
               z-index: 1000;
               position: absolute;
               width: 150px;
           }
       </style>
   
   
       <div>
           <label>Input #1:</label> <input><br>
           <ul>
               <li>item</li>
               <li>item</li>
               <li>item</li>
               <li>item</li>
           </ul>
       </div>
   
       <div>
           <label>Input #2:</label> <input>
       </div>
   
   

以上是為什麼 Internet Explorer 7 中的 Z 索引行為會有所不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！