为什么 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中文网其他相关文章！