z-index 溢出答案

【问题标题】：overflow with z-indexz-index 溢出
【发布时间】：2012-08-02 15:11:26
【问题描述】：

我有以下 HTML 标记

<div id="main">
 <div id="div1" style="position:relative;"></div>
 <div id="div2" style="z-index:-1; position:relative; overflow:auto; height:500px;"></div> 
</div>

在div2我动态加载数据，内容可能超过div的高度，所以我使用overflow:auto属性来显示滚动条。问题是滚动条出现在所有浏览器中，但它只在 IE8/9、FireFox 和 Chrome 中有效。在其他浏览器中您看到滚动条，但没有功能。

【问题讨论】：

如果有的话还在寻找答案！

标签： html css

【解决方案1】：

您的 div2 的 z-index 为 -1。所以它落后了。这就是它不起作用的原因。

【讨论】：

删除该 z-index。为什么你有它？
z-index 属性在我的布局中是必需的
我认为 z-index 是原因。试着放下它，看看问题是否解决了。如果它破坏了您的布局，您将不得不找到一种不同的布局方法。
这确实是解决方案。您正在用另一个对象覆盖滚动条。

【解决方案2】：

我有一个类似的问题，发现负 z-index 确实是问题，而正 z-index 是解决方案。尝试将 div2 的 z-index 设置为 0 或某个正值 X，然后将其他元素的 z-index 设置为大于 0 或 X 的 z-index。负 z-index 会导致项目“低于” " 鼠标交互的级别，因此新的 z-indicies 将导致 div2 落后于具有更高 z-index 的其他内容，同时仍允许鼠标交互。

请参阅此问题了解更多详情： Weird z-index behaviour preventing mouse interactions: bug or normal?

【讨论】：