我有:
<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 下方，则它不会被按下。
最佳答案
我有made a demo我认为这显示了问题和解决方案。您可能需要调整 HTML 的大小节，以便 <submit>按钮在“示例”下方<div>背景为绿色。
我使用的解决方案是 CSS3-UI pointer-events 属性(property)。不过有一个缺点，即它在 IE 或 Opera 中不受支持。根据Mozilla's documentation
适用于 Firefox 3.6+、Safari 3+、Chrome 4+。
我已经在 Chrome12 和 Firefox4 中测试过了，我可以点击 <submit> <div> 下的按钮
编辑:您可以重新设计网站或隐藏 <div>完全适用于 IE/Opera。但是，如果您可以使用 JavaScript(我猜您一定是因为 position:fixed 没有它就不能在 IE 中工作)，我可以想到几个选项:
- 淡出/淡入
<div>当鼠标在上面时 - 获取鼠标坐标并找到
<input>在下方，然后以编程方式单击按钮(请参阅 http://www.vinylfox.com/forwarding-mouse-events-through-layers/ )
编辑 2:Updated demo 与 IE 一起工作。这个解决方案需要 jQuery，但它可能在没有库的情况下完成。您将需要使用 CSS position得到一个<input>在定位<div>下.
注意:这在 Click through div with an alpha channel 之前已经介绍过了和 Click through a DIV to underlying elements
关于html - 单击带有 z-index 的定位 div 以在下方提交按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5788841/