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-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溢出它.

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

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之前完成