html – 点击带有z-index的定位div来提交下面的按钮

概述我有： <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- 我有：

<div >    <div >        <h3 >example</h3>    </div></div>

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

有没有办法解决这个问题而不改变整个设计结构？

UPDATE

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

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

我使用的解决方案是CSS3-UI pointer-events属性.但是有一个缺点,因为在IE或Opera中不支持它.根据Mozilla’s documentation
适用于firefox 3.6,Safari 3,Chrome 4.

我在Chrome12和firefox4中对此进行了测试,我可以点击< submit> < div>下的按钮

编辑：您可以重新设计网站或隐藏< div>完全适用于IE / Opera.但是,如果你可以使用JavaScript(我想你必须是因为位置：固定在没有它的IE中不起作用),我可以想到几个选项：

>淡出/淡出< div>当鼠标结束时
>获取鼠标坐标并找到< input>在下面,然后以编程方式单击按钮(见http://www.vinylfox.com/forwarding-mouse-events-through-layers/)

编辑2：Updated demo与IE一起工作.这个解决方案需要jquery,但它可能在没有库的情况下完成.您将需要使用CSS位置来获得< input>在定位的< div>下.

注意：这已在Click through div with an alpha channel和Click through a DIV to underlying elements之前完成

总结

以上是内存溢出为你收集整理的html – 点击带有z-index的定位div来提交下面的按钮全部内容，希望文章能够帮你解决html – 点击带有z-index的定位div来提交下面的按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。