通过 z-index 定位的 div 点击提交按钮。提交按钮位于其下方。

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的空间从左到右伸展100％。由于它具有z-index属性，因此它会溢出位于下方的所有内容。因此，如果我例如有一个按钮，在滚动时会在这个div下面，那么它是无法被点击的。

- Eugene

---

我不确定问题具体是什么。你能解释一下“div overflows it”这部分吗？ - andyb

我想我现在明白问题了。您希望能够单击呈现在<div>下的按钮。 - andyb

是的，但不包括CSS3或HTML5。只有基础知识。 - Eugene

Answer 1

我已经制作了一个演示，展示了问题和解决方案。您可能需要调整HTML部分的大小，以便<submit>按钮位于带有绿色背景的“example”<div>下面。

我使用的解决方案是CSS3-UI pointer-events属性。然而，它在IE或Opera中不受支持。根据Mozilla的文档，它适用于Firefox 3.6+、Safari 3+、Chrome 4+。

我已在Chrome12和Firefox4中进行了测试，我可以单击位于<div>下方的<submit>按钮。

编辑：好的，你可以重新设计网站或者完全隐藏IE/Opera中的<div>。但是，如果你能使用JavaScript（我猜你一定会，因为在IE中没有它，position:fixed不起作用），我可以想到几个选项：

1. 当鼠标悬停在上面时，淡出/淡入<div>
2. 获取鼠标坐标并找到下面的<input>，然后编程式地点击按钮（参见http://www.vinylfox.com/forwarding-mouse-events-through-layers/）

编辑2：更新演示以适用于IE。这个解决方案需要jQuery，但可能可以在没有库的情况下完成。您需要调整CSS position以在定位的<div>下方获得一个<input>。

注意：这个问题之前已经被讨论过了，可以参考如何使用带有 alpha 通道的 div 元素进行点击和如何通过 div 点击到底层元素

- andyb

---

这很棒，但这是商店设计，不是一些小项目，因为这是一家商店，有各种各样的客户，他们可能也使用IE和Opera，这不是一个好的解决方案。 - Eugene

我已经用JavaScript（好吧，jQuery）在IE6中实现了我的答案中的第二个选项。 - andyb

我用你的解决方案作为备选，并将其进行了微调。http://jsbin.com/amoze4 - Eugene