Problem with z-index

views:

answers:

Problem with z-index

I'm trying to use z-index to layer a button and a div. The button appears behind the div, while according to z-index it should be in front of it. Here is the style elements associated with the button & div as captured by Firebug:

Note that the button has a z-index of 2, the div has a z-index of 1, and both are position:relative.

Full HTML is in this pastebin.

+3 A:

z-index is a relative, not an absolute value.

An object with z-index 10 billion will not appear on top of all elements on the page, only on top of other elements in the same stacking context

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

In the CSS hierarchy you posted, it looks like the button and div are contained in different elements (#note18 and #note19), so you'll have to make sure that those elements aren't creating different stacking contexts which will make any z-indexes for elements inside them irrelevant to each other.

GApple 2010-04-27 21:39:16

Hmm .. interesting, I didn't know that.How would you suggest I proceed in "making sure those elements aren't creating different contexts..." ?

ripper234 2010-04-27 21:42:31

I'm reading through what you linked to, I guess the answer is there but I haven't found it yet.

ripper234 2010-04-27 21:45:58

I played around with the second link, and found no easy way to do this while keeping relative positions anywhere in above in the hierarchy. OK, so now I understand why this is happening - but how can I get the desired effect?

ripper234 2010-04-27 21:55:56

When I copied your pastebin code, removing the z-index from the .sticky class allowed the buttons to show on top of neighbouring cells.

GApple 2010-04-27 22:14:09

Thanks @GApple - I ended up leaving only the z-index for the button itself, and this works perfectly.

ripper234 2010-04-28 00:49:22

ansaurus

tags:

views:

answers:

Problem with z-index

related questions