Question

我正在使用此代码段将叠加层附加到整个网站：

$(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
      });

});

效果很好，只需要一个元素就可以位于此叠加ID之上。我已经在这里给了那个元素一个大于5000的z指数，但它似乎永远不会超越灰色叠加 - 任何想法？

Answer 1

确保它是body的兄弟姐妹和直接孩子，以确保它在IE中工作，同时为position提供static以外的z-index以及更高的{{1}比5000。

Answer 2

也可以position:absolute或position:relative。

Answer 3

确保要覆盖的元素定位（如绝对或相对）..其他明智的z-index意味着什么

Answer 4

首先检查第二个元素的确切位置，换句话说，如果你在JQuery中分配这个值，但是使用普通的css来编码第二个元素值可能存在冲突。另外你应该尝试使用一些引号，其中我发现使用双引号和不透明度值帮助。

只是一个建议虽然不是尝试使用JQuery动态分配元素并给它们属性可能我建议你在给出元素属性时尝试普通的css并且只使用JQuery来操纵需要计算的内容或者不能通过css来完成单独。然后您的代码将是这样的：

$(function() {

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

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

并且该元素还具有由默认css文件

指定的属性

整个网站覆盖div？

4 个答案: