gpt4 book ai didi

javascript - 为什么 z-index 没有像我期望的那样工作?

转载 作者:行者123 更新时间:2023-11-29 18:35:33 24 4
gpt4 key购买 nike

我当前元素的要求涉及在页面上下文中“突出显示”HTML 元素。也就是说,我需要提供某种视觉效果来降低周围页面的亮度,同时让元素保持全亮度。

为此,我正在尝试以下方法:

  • 确定最高 z-index页面上任何元素的值(使用 JavaScript)。
  • 创建一个元素作为页面顶部的“背景”。这只是一个 <div>具有半透明的灰色背景图像,大小为 <body> 的宽度和高度的 100%元素,带有 position: fixed .我设置它的 z-index比最高 z-index 大 1我在页面上找到了它,目的是覆盖页面上的所有其他元素。
  • 更改 z-index “突出显示”的元素比背景大 1。目的是让它位于背景之上,而背景又位于页面其余部分之上。

我在一个快速测试页面上让它工作:

http://troy.onespot.com/static/stack_overflow/z_index_test.html

但是当我尝试在一些实际的网页上设置它时,它并不是在所有情况下都有效。例如:

http://troy.onespot.com/static/stack_overflow/z_index.html

在这里,我在 Jacksonville.com 文章页面的副本上插入了两个“虚拟”元素,它们的类都是 test (如果您正在查看页面源代码,它们位于第 169 和 859 行)。

我还在页面的最后添加了一些 JavaScript(使用 jQuery),其功能如上所述。

第一个<div class="test">确实像我期望的那样工作。然而,第二个没有——尽管 z-index 更高,但它似乎仍然停留在“背景”元素之下。 .

我认为这可能与堆栈上下文有关,但在阅读了相关的 W3C 文档(http://www.w3.org/TR/CSS21/visuren.html#z-indexhttp://www.w3.org/TR/CSS21/zindex.html)之后,我仍然无法理解为什么会这样。如果有人更熟悉 z-index,我将不胜感激和堆叠顺序比我看我的例子,让我知道是否有任何可疑之处。

请注意,我只在 Firefox v3.6 中测试了这些示例。

非常感谢您的帮助!

最佳答案

问题是第二个测试 div 在一堆其他 HTML 元素中,其中一个必须创建一个新的堆栈上下文(它可能是 #wl-wrapper-tier-1分区)。基本上,每当元素被定位并且具有 auto 以外的 z-index 时,都会创建一个新的堆栈上下文,请参阅 this MDC article有关堆栈上下文的更多信息。

最终这意味着您无法使用此方法可靠地达到您想要的效果。我认为您最好编写 4 个 div 来包围目标元素。

关于javascript - 为什么 z-index 没有像我期望的那样工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3644782/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com