CSS - z-index not working properly

Question

I'm using z-index on my page ( -link no longer needed- ), and it doesn't work properly: it doesn't place certain divs above all others...

You can see it yourself, by clicking one of the items in the left, or right bar. Then, the mask will fade in, but show the message box, beneath it. I've tried a lot, but I just can't get the message box to show above all others...

What can I do to fix this? [note: 2nd question below!]

If you don't want to check the page, the message box is located in some other divs:

<div>
 <div>
  <div>message box</div>
 </div>
</div>

The CSS positioning is like this:

.window {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100;
}

I use position:fixed, because position:absolute is not absolute here, the div is not aligned to the body, but something else somehow. Is there a way to reset the positioning and absolute position it again?

Chapfallen

z-index only works when it is applied to elements that have the same type of positioning. So if one element is out of the dom via absolute or some other position then its z-index will not be relative to other elements in the dom but only to elements that have the same positioning type. – Raposa

Oh ok, so a fixed object just can't overlap an absolute object? – Chapfallen

correct because according to the z-index and the dom they are really not relative to each other and in fact because an absolute object is out of the dom the fixed one does not even know its there to go on top of it. – Raposa

Ok. Thanks for that! I was already thinking of doing a workaround, using jQuery: getting the content from what now is the message box. And placing that inside another div, which is positioned absolute. I think that will work. – Chapfallen

yep I have run into z-index issues before with elements that had different types of positions. Position definitely matters and its really annoying :( – Raposa

Really annoying :P I actually never read about this on the w3c website... They might have specified this, it's a pretty important detail if you ask me... – Chapfallen

Answer 1

For as long as I can remember, z-index issues often come from the fact than the parents of the z-indexed elements are not positioned. Sibling parents should be positioned.

Giamo

Answer 2

If you're using jquery check the top Z Index Plug In, you can apply it when the object has a mouse over event like:

<div id="modal" onmouseover="$(this).topZIndex();"></div>

Then change the position to absolute with jquery also or viceversa:

$(document).ready(function(){ $('#modal').css('position','absolute'); });

Stier

Hmmm, it doesnt seem to work... I've included in another jQuery script, but now it gives me the error that launchWindow is not defined... any clue what to do? Also, the position needs to be 'fixed', as I described above, will that also work? – Chapfallen

I now have put the line <script type="text/javascript" src="scripts/jquery.topzindex.min.js"></script> above the other script, and no more errors show. However, the z-index issue is still the same... – Chapfallen

Is the div inside an iframe or another div? – Stier

Yeah, another div. But I fixed it by placing another div on my page, #message, which I then change the html() to the html() of the message I want to display. An easy fix. :) – Chapfallen

Oh good, also you can append the div to the page when the message is required, that allow always to pop the message in front of everything. With jQuery is as easy as $(document.body).append('<div id="message"></div>');, but of course you have to give the appropriate css properties. To remove just $('#message').remove(); – Stier

Answer 3

if you remove z-index from #leftbar it fixes your problem. The position should not matter, as long as you have one.

Oaf

Unfortunatly, that z-index is needed for the rest of the page :( Perhaps you know another solution? – Chapfallen

when you open the popup, remove #leftbar z-index, when you close the popup, add it again. :) – Oaf

another solution would be to have a 3 columns layout where your map is not 100% width then you would not need z-index on columns. – Oaf

Yeah, its an option, but I want the sidebars to be overlayed divs, thanks for the suggestion though! – Chapfallen