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?

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

Solution 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'); });

Solution 3

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

Comments

[laarsk]

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

[laarsk]

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?

[laarsk]

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

[raphie]

Is the div inside an iframe or another div?

[Michael]

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

[Michael]

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.

[laarsk]

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

[laarsk]

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. :)

[raphie]

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();