Home/ Questions/Q 1052375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T17:04:59+00:00

A requirement for a current project of mine involves highlighting an HTML element in

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.

    Ultimately this means you can’t achieve your desired effect reliably with this method. I think you’re probably better off composing 4 divs to surround the target element.

    • 0