Whole site overlay div?

Question

I'm using this snippet to append an overlay to a whole site:

$(function() {

   var docHeight = $(document).height();

   $("body").append("<div id='overlay'></div>");

   $("#overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'width': '100%',
         'z-index': 5000
      });

});

It works great, only I need one element to sit above this overlay ID. I've given that element a z-index greater than the 5000 here, but it never seems to ascend above the gray overlay---any ideas?

Answer 1

Give it position:absolute too, or position:relative.

Answer 2

Make sure the element you want overlaying is positioned (like absolute or relative).. other wise z-index means nothing

Answer 3

Make sure it's a sibling and direct child of body to guarantee it'll work in IE along with giving it a position of anything other than static and a higher z-index than 5000.

Answer 4

1st check where exactly the 2nd element is being added in other words if ur assigning this value in JQuery but ur using plain css to code the 2nd elements values there may be a confliction. Also u should try using some quotes where ur values are i found that using double quotes with opacity values help.

Just a suggestion though instead of trying to dynamically assign elements using JQuery and give them properties might i suggest u try plain css when giving the elements attributes and only use JQuery to manipulate what needs to be calculated and or cannot be accomplished by css alone. Then ur code would be like this:

$(function() {

   var docHeight = $(document).height();

   $("body").append("<div id='overlay'></div>");
   $("#overlay").height(docHeight);
   $("#overlay").css({"opacity":"0.4"});
});

and the element would also have the properties assigned by the default css file