CSS - z-index not working properly

css positioning z-index fixed absolute
laarsk picture laarsk · Nov 28, 2011 · Viewed 29.4k times · Source

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

Boris Delormas picture Boris Delormas · Nov 29, 2011

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.

Related questions

Z-Index Relative or Absolute?

I'm trying to find an answer to the following question: Is an element's z-index style its absolute stack order, or its stack order relative to its parent? For instance, suppose I have the following code: <div style="z-index:-100"&…

Read More
How to select options overlapping an absolute positioned DIV?

I have an absolute positioned div which works like a tooltip. On mouse over of an element it shows and then hides at mouse out. I have few <select> elements in the page which is placed above the …

Read More
Make div stay at bottom of page's content all the time even when there are scrollbars

CSS Push Div to bottom of page Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the complete bottom of the page, like Stack Overflow. …

Read More