Question

I’m creating a system to walk users through a web site. To avoid mistakes and to keep the user focused I’d like to darken everything on the page other than what I want them to interact with. I’d also like to do this in place (not in a popup).

The way I approached this was to append a div to the body and set it’s style to:

  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #000;
  opacity: 0.5;
  -ms-filter:'alpha(opacity=50)';
  filter: alpha(opacity=50)
  z-index: 1000

I then set the z-index of the element I wanted to highlight/lightbox to be higher than that of the appended div. In this case, I set it to be 1001. For my primary use case, I wanted to highlight a form. The problem with this was that only the individual check boxes and other fields became undarkened and clickable. The box containing the form was still dark. Is there any way that I can get entire element including the background to become highlighted?

Answer 1

It’s hard to be precise without seeing your HTML, but this sounds like a z-index issue to me.

z-index only applies to elements that have position of either absolute, relative or fixed. The default is static.

Try explicitly setting the positioning for the ‘non-working’ elements to relative.