Question

I made a barebones example of this here.

是什么原因引起的？通过将z-index应用于div（在示例中为.spread），鼠标事件就完全消失了。在我正在处理的插件中，我需要使用z-index进行定位，而我宁愿不让用户使用我的插件尝试在将来自己解决这个问题。

基本上，只需应用

即可

position:relative;
z-index:*anything less than 0)

任何和所有鼠标事件都将被清零。即使我尝试将正z-index添加到a s，它仍然无效。

我如何解决这个问题，以便我可以在div上放置负z-索引，同时仍然允许它们的内容可点击/可以/可用？

编辑：嗯，我很蠢。我不知道body有它自己的z-index，我只是认为它在所有东西之下（因为你为什么要在整个页面下面有任何东西，只显示：没有它）谢谢大家！

Answer 1

我认为否定z-index将元素置于文档<body>后面。

请改为尝试：

.spread { z-index: 1; }    
header  { z-index: 2; }

http://jsfiddle.net/uW9jk/3/

Answer 2

不要使用负z索引。将示例中的-2更改为0或1或其他任何正面问题都可以解决问题。 Proof.

Answer 3

通过设置否定z-index，您的div元素将位于body元素后面，默认情况下为z-index: 0

通过设置正文的z-index来确认。 http://jsfiddle.net/uW9jk/5/

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

相应于docs.webplatform

正z-index值位于负（或较小值）z-index之上。堆叠具有相同z索引的两个对象   根据来源订单。正值定位元素   上面没有定义z-index的文本和负值位置   它在下面。将此参数设置为null以删除该属性。该   z-index属性仅适用于具有该位置的对象   属性设置为相对或绝对。该酒店不适用于   窗口控件，例如选择对象。 从指向输入   诸如鼠标之类的设备不会穿透重叠   元素即使元素不可见。 这也是如此   定位具有负z-index 的元素，除非：

父级是一个滚动容器（也就是说，它的溢出属性是   设置为自动或滚动）。父母定位（即，它的   position属性设置为绝对，相对或固定）。

更正：默认情况下，body元素有z-index: auto，但有必要将auto解释为0或{{1}因为0以下的所有内容都将落后于它。

注意：负z-index值是CSS2.1行为，CSS2及更早版本不允许这样做。

Negative z-index Support: Webkit 1.0 | Gecko(FF) 3.0 | IE 4.0 | Opera 4.0

CSS定位会破坏鼠标事件

3 个答案: