Click through positioned div with z-index to submit button underneath
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:#开发者_JAVA技巧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.
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:
- Fade out/fade in the
<div>
when the mouse is over it - 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
精彩评论