html – 奇怪的z-index行为阻止鼠标交互:bug还是正常?

前端之家收集整理的这篇文章主要介绍了html – 奇怪的z-index行为阻止鼠标交互:bug还是正常?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
每次我尝试在网页中使用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意味着对象低于鼠标光标在理论上生活的水平?

猜你在找的HTML相关文章