单击带有 z-index 的定位 div 以在下方提交按钮答案

【问题标题】：Click through positioned div with z-index to submit button underneath单击带有 z-index 的定位 div 以在下方提交按钮
【发布时间】：2011-04-29 19:59:53
【问题描述】：

我有：

<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 下方，则它不会是可推动的。

【问题讨论】：

我不确定到底是什么问题。能否解释一下“div 溢出”部分？
我想我现在明白了这个问题。您希望能够单击在<div> 下呈现的按钮。
是的，但没有 CSS3 或 html5。只有基础知识。

标签： html css positioning z-index

【解决方案1】：

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

我使用的解决方案是 CSS3-UI pointer-events 属性。但是有一个缺点，IE 或 Opera 不支持它。根据Mozilla's documentation 适用于 Firefox 3.6+、Safari 3+、Chrome 4+。

我已经在 Chrome12 和 Firefox4 中测试过了，我可以点击<div> 下的<submit> 按钮

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

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

编辑 2：Updated demo 以使用 IE。这个解决方案需要 jQuery，但它可能在没有库的情况下完成。您将需要使用 CSS position 以在定位的 <div> 下获得 <input>。

注意：这在Click through div with an alpha channel和Click through a DIV to underlying elements之前已经介绍过

【讨论】：

这很好，一切都很好，但这是商店设计而不是一些小项目，因为它是一家商店，而且有各种各样的客户也可能使用 IE 和 Opera，所以这不是一个好的解决方案。
我已经让它在 IE6 中使用 JavaScript（以及 jQuery）在我的答案中实现选项 2。
我将您的解决方案作为后备方案，并调整了我的一点点。 jsbin.com/amoze4