奇怪的z-index行为阻止鼠标交互：bug还是正常？

Question

每当我尝试在网页中使用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，但越少越好。）

Answer 1

好吧，10秒后，我发现只使用正面的z-index'会使问题消失。 也许负面的z-index意味着对象低于鼠标光标在理论上生活的水平？

Answer 2

你知道吗？为了使z-index正常工作，你需要定位你的元素，即使它们只是position: relative （它不会改变它们的位置，但允许你使用z-index）。 这样，你应该能够给leftbar的位置，例如2 ，你的h3的位置，比方说3 。 你的h3应该是最重要的。

您可以使用任何位置类型，只要您有一个。

回顾：

#leftcolumn { position: absolute; z-index: 1; }

#leftbar { position: relative; z-index: 2; }

h3 { position: relative; z-index: 3; }

Answer 3

即使左栏内容可见，左栏div现在也位于其上方，可能具有透明背景。 理想情况下，您可能希望修改HTML以使H3位于左侧栏中，但如果这不是一个选项，您可能需要将z-index应用于左列中的特定元素，以便将它们拉到左侧栏中的元素之上。