Why isn't z-index working as I'd expect it to here?

A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.

To achieve this, I'm trying the following approach:

Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.

I got it working on a quick test page:

http://troy.onespot.com/static/stack_overflow/z_index_test.html

but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:

http://troy.onespot.com/static/stack_overflow/z_index.html

Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).

I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.

The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.

I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.

Please note that I've only tested these examples in Firefox v3.6.

Thanks very much for any help!

Great explanation - I think I get it now. Basically, no matter how high I set the `z-index` of the highlighted element, it will never appear above the backdrop because its stacking context (established by some parent element) is beneath the backdrop. I'm not sure that the solution you proposed will work for me, but I appreciate the cogent answer!

Bungle 2010-09-05 03:19:54

ansaurus

tags:

views:

answers:

Why isn't z-index working as I'd expect it to here?

related questions