奇怪的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意味着对象低于鼠标光标在理论上生活的水平？