html - 奇怪的 z-index 行为阻止鼠标交互 : bug or normal?

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 意味着对象低于鼠标光标名义上的水平？