每次我尝试在网页中使用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,但越少越好.)
解决方法
好吧,10秒后我发现仅使用正z-index’会使问题消失.也许负的z-index意味着对象低于鼠标光标在理论上生活的水平?