Click through positioned div with z-index to submit button underneath

Question

I have:

<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>

and if there is something on the same level as this div, then div overflows it.

Is there a way to fix this problem without changing entire design structure?

UPDATE

Space for outer div stretches from side to side 100%. Since it has z-index property it overflows everything that is below. So if I have for example button which during scrolling will be below this div it woun't be pushable.

Answer 1

I have made a demo which I think shows the problem and a solution. You may need to resize the HTML section so that the <submit> button is underneath the "example" <div> with the green background.

The solution I have used is the CSS3-UI pointer-events property. There is one drawback though, in that it is not supported in IE or Opera. According to Mozilla's documentation is works in Firefox 3.6+, Safari 3+, Chrome 4+.

I have tested this in Chrome12 and Firefox4 and I can click on the <submit> button under the <div>

Edit: Well you can either re-design the site or hide the <div> completely for IE/Opera. However, if you can use JavaScript (which I guess you must be since position:fixed does not work in IE without it), there are a couple of options I can think of:

1. Fade out/fade in the <div> when the mouse is over it
2. Get the mouse co-ordinates and find the <input> underneath and then programmatically click the button (see http://www.vinylfox.com/forwarding-mouse-events-through-layers/)

Edit 2: Updated demo to work with IE. This solution needs jQuery but it could be probably done without a library. You will need to play with the CSS position to get an <input> under the positioned <div>.

Note: This has been covered before Click through div with an alpha channel and Click through a DIV to underlying elements