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?

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.