4

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.

andyb
  • 43,435
  • 12
  • 121
  • 150
Eugene
  • 4,352
  • 8
  • 55
  • 79

1 Answers1

8

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

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
  • That's great and everything, but this is shop design not some small project and since it's a shop and there is a variety of customers who also probably use IE and Opera it's not a good solution. – Eugene Apr 26 '11 at 12:24
  • I have got it working in IE6 with JavaScript (well jQuery) implementing option 2 in my answer. – andyb Apr 26 '11 at 13:24
  • I did your solution as a fallback and tweeked my little bit. http://jsbin.com/amoze4 – Eugene Apr 26 '11 at 14:24