Question

我有：

<div style="bottom:0; left:0; right:0; position:fixed; z-index:50; display:inline-block;">
    <div style="margin:auto; width:500px; background-color:#90C553; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border:1px solid #CCC; text-align:center;">
        <h3 style="font-size:17px; color:#0072A7; padding:10px 15px;">example</h3>
    </div>
</div>

如果有与此div相同级别的内容，则div溢出它。

有没有办法在不改变整个设计结构的情况下解决这个问题？

更新

外部div的空间从一侧延伸到另一侧100％。由于它具有z-index属性，因此会溢出下面的所有内容。因此，如果我有例如按钮，在滚动期间将低于此div，它将无法推送。

Answer 1

我认为made a demo显示了问题和解决方案。您可能需要调整HTML部分的大小，以便<submit>按钮位于具有绿色背景的“示例”<div>下方。

我使用的解决方案是CSS3-UI pointer-events属性。但是有一个缺点，因为在IE或Opera中不支持它。根据{{3}} 适用于Firefox 3.6 +，Safari 3 +，Chrome 4 +。

我已经在Chrome12和Firefox4中对此进行了测试，我可以点击<submit>

下的<div>按钮

编辑：您可以重新设计网站，也可以完全隐藏<div> IE / Opera。但是，如果你可以使用JavaScript（我想你必须这样，因为position:fixed没有它在IE中不起作用），我可以想到几个选项：

当鼠标悬停在<div>时淡出/淡出
获取鼠标坐标并在下方找到<input>，然后以编程方式点击按钮（请参阅Mozilla's documentation）

编辑2：http://www.vinylfox.com/forwarding-mouse-events-through-layers/ 与IE合作。这个解决方案需要jQuery，但它可能在没有库的情况下完成。您需要使用CSS position来定位<input>下的<div>。

注意：在Updated demo和Click through div with an alpha channel

点击带有z-index的定位div以提交下方的按钮

1 个答案: