I'm having a problem with z-index on an object. I don't use jQuery - I know javascript quite well and don't see the point in learning another way of doing it. But no matter what z-index I put this div at, elements burn through it. I did some searching and the only hint I got was that it may be something JQuery is doing, but couldn't find a fix. If I have to put some JQuery in my page just to get the z-index working that's fine but I'd rather not do the whole thing that way. If it's not JQuery does anyone know what might be causing this behavior? I tested it on various pages in the site, most of which have no custom javascript or other strangeness on them but see the same behavior - z-index seems to be completely ignored (including the default way of html working where the last element is on top). Anyone else familiar with this?
very straightforward example below: css: #theOverlay{ height:1000px; width:1000px; top:0px; left:0px; background-color:#000; z-index:100; /* i've tried every number here imaginable */ }
html (just before </body>): <div id="theOverlay"></div>
Oh man I'm tired - i forgot position:absolute - nothing to do with drupal, just my own mind failing me. please ignore ;)
sander-martijn wrote:
I'm having a problem with z-index on an object. I don't use jQuery - I know javascript quite well and don't see the point in learning another way of doing it. But no matter what z-index I put this div at, elements burn through it. I did some searching and the only hint I got was that it may be something JQuery is doing, but couldn't find a fix. If I have to put some JQuery in my page just to get the z-index working that's fine but I'd rather not do the whole thing that way. If it's not JQuery does anyone know what might be causing this behavior? I tested it on various pages in the site, most of which have no custom javascript or other strangeness on them but see the same behavior - z-index seems to be completely ignored (including the default way of html working where the last element is on top). Anyone else familiar with this?
very straightforward example below: css: #theOverlay{ height:1000px; width:1000px; top:0px; left:0px; background-color:#000; z-index:100; /* i've tried every number here imaginable */ }
html (just before </body>):
<div id="theOverlay"></div>
sander-martijn wrote:
Oh man I'm tired - i forgot position:absolute
For the record, position:relative will also work, so don't feel that your layout will have to be spoiled by a position:absolute just to get z-index working. There's a very clear discussion of most possible combinations of position and z-index at:
http://www.aplus.co.yu/lab/z-pos/
Cheers, J-P
yes i know - this one needs to be absolute because it needs to fill the screen as an overlay. I was just really exhausted and forgot to position it at all and no matter how many times i stared at those few lines of css i didn't notice it missing.
J-P Stacey wrote:
sander-martijn wrote:
Oh man I'm tired - i forgot position:absolute
For the record, position:relative will also work, so don't feel that your layout will have to be spoiled by a position:absolute just to get z-index working. There's a very clear discussion of most possible combinations of position and z-index at:
http://www.aplus.co.yu/lab/z-pos/
Cheers, J-P
-
J-P Stacey -
sander-martijn