為什麼 IE7 中的下拉式選單隱藏在輸入欄位後面？

IE7：了解 Z-Index 分層混亂

IE7 呈現了 z-index 在元素分層應用中的複雜性。了解 z-index 的工作原理有助於有效解決分層問題。

Z-Index 和堆疊上下文

與它的名稱相反，z-index 並不是一個絕對度量。如果 z-index 較高的元素屬於不同的堆疊上下文，則它們可以隱藏在 z-index 較低的元素後面。

為定位元素（絕對、相對或固定）建立堆疊上下文。但是，IE7 錯誤地將沒有 z-index 的定位元素解釋為建立新的堆疊上下文。

程式碼中的問題

在您的範例中，您有一個定位跨度 ( <span>）缺少 z 索引。 IE7 將此解釋為建立一個新的堆疊上下文，使下拉式選單 (

) 隱藏在輸入欄位 () 後面。

可能的解決方案

要解決此問題，請考慮以下事項解決方案：

1. 將 z-index新增至定位跨度：

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

這明確定義了堆疊上下文並確保下拉清單與輸入欄位。

2. 從Span：

<span>

透過刪除位置，您可以消除不必要的堆疊上下文。現在，元素將遵循預設的分層順序，其中下拉清單位於輸入欄位上方。

其他注意事項

• Z 索引只影響其中的元素相同的堆疊上下文。
• IE6 還有一個額外的錯誤，即選擇框和iframe 始終浮在所有內容之上else.
• 更詳細的解釋和類似的錯誤示例，請參閱：https:/ /www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-索引錯誤/

以上是為什麼 IE7 中的下拉式選單隱藏在輸入欄位後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！