整个网站覆盖div？

发布于 2024-09-15 15:26:38 字数 518 浏览 4 评论 0原文

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

$(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 索引，但它似乎从未上升到灰色覆盖层之上 — 有什么想法吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

唱一曲作罢 2024-09-22 15:26:38

确保它是 body 的同级和直接子级，以保证它可以在 IE 中工作，并为其指定除 static 之外的任何内容的 position且 z-index 高于 5000。

回复收藏 0 原文

青萝楚歌 2024-09-22 15:26:38

也给它position:absolute，或者position:relative。

回复收藏 0 原文

睫毛溺水了 2024-09-22 15:26:38

确保您想要覆盖的元素已定位（例如绝对或相对）..否则 z-index 没有任何意义

回复收藏 0 原文

一绘本一梦想 2024-09-22 15:26:38

第一次检查第二个元素到底添加在哪里，换句话说，如果您在 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 文件分配的属性

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

回复收藏 0 原文

~没有更多了~