每当我尝试在网页中使用z-index来改变堆叠重叠div的顺序时，我似乎遇到了一个问题，即被迫降低的div对鼠标事件没有反应。
在我目前的情况下，我有：
<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>
默认情况下，h3没有显示 - 它隐藏在左侧栏后面。如果我添加z-index：5;到了H3，它仍然没有显示出来。
所以我将z-index：-1添加到左侧栏。现在它隐藏在左栏后面 - 但至少h3显示。
所以我将z-index：-2添加到左列。现在一切看起来都正确 - 但你不能点击左栏内的任何东西。鼠标光标不会从箭头改变。
我在Chrome和Firefox中都得到了这种确切的行为。 IE7根本不显示左栏，但至少可以点击这些东西。
那么，我是否误解了z-index，或者这里的FF和Chrome都存在错误？ z-index可以有效地用于这种东西，还是我必须找到另一种方式？
（我可以更改HTML，但越少越好。）
答案 0 :(得分：6)
好的，10秒钟后我发现仅使用正z-index'会使问题消失。也许负的z-index意味着对象低于鼠标光标在理论上存在的水平？
答案 1 :(得分：1)
你知道吗？为了让z-index正常工作，你需要定位你的元素，即使它们只是position: relative（它不会改变它们的位置，但允许你使用z -指数）。这样，您应该能够为leftbar提供2的位置，例如3和您的h3位置，例如#leftcolumn { position: absolute; z-index: 1; }。你的h3应该是最重要的。
您可以使用任何职位类型，只要您拥有职位类型。
回顾：
#leftbar { position: relative; z-index: 2; }
h3 { position: relative; z-index: 3; }
{{1}}
答案 2 :(得分：0)
即使左栏内容可见，左栏div现在也位于其上方，可能具有透明背景。理想情况下，您可能希望修改HTML以使H3位于左侧栏中，但如果这不是一个选项，您可能需要将z-index应用于左列中的特定元素，以便将它们拉到左侧栏中的元素之上。