CODEWITHSUNDEEP
csspositioningz-indexfixedabsolute
laarsk
laarsk

Reputation: 872

CSS - z-index not working properly

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?

Upvotes: 5

Views: 30419

Answers (3)

Boris Delormas
Boris Delormas

Reputation: 2549

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.

Upvotes: 19

Michael
Michael

Reputation: 3426

screenshot

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

Upvotes: 1

raphie
raphie

Reputation: 3305

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

Upvotes: 2

Related Questions