CSS - z-index does not work properly

Question

I use z-index on my page (the link is no longer needed) and it does not work properly: it does not put certain divs above all others ...

You can see this for yourself by clicking on one of the items in the left or right panel. Then, the mask will disappear, but show the message box below it. I tried a lot, but I just can't get a message box to show above all the others ...

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

If you do not want to check the page, the message box is in some other divs:

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

CSS positioning is as follows:

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

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

Answer 1

As long as I remember, z-index problems often come from the fact that the parents of z-indexed elements are not located. Sibling parents should be located.

Answer 2

If you use jquery, check the superscript Z Plug In , you can apply it when the object has a mouse over the event, for example:

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

Then change the position to absolute using jquery and / or vice versa:

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

Answer 3

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