对我当前项目的要求涉及在页面上下文中“突出显示”HTML元素。也就是说，我需要提供某种视觉效果，降低周围页面的亮度，同时保持元素的全亮度。
为实现这一目标，我正在尝试以下方法：
z-index值（使用JavaScript）。<div>，具有半透明的灰色背景图像，大小为<body>元素宽度和高度的100％，position: fixed。我将其z-index设置为大于我在网页上找到的最高z-index，其目的是覆盖页面上的所有其他元素。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-index＆amp; http://www.w3.org/TR/CSS21/zindex.html）之后，我仍然无法理解为什么会发生这种情况。我很感激有人比我更熟悉z-index和堆叠顺序，看看我的示例，让我知道是否有任何可疑之处。
请注意，我只在Firefox v3.6中测试了这些示例。
非常感谢您的帮助！
答案 0 :(得分：3)
问题是第二个测试div位于一堆其他HTML元素中，其中一个必须创建一个新的堆叠上下文（可能是#wl-wrapper-tier-1 div）。基本上，只要元素被定位并且z-index不是auto，就会创建一个新的堆叠上下文，有关堆叠上下文的详细信息，请参阅this MDC article。
最终，这意味着您无法使用此方法可靠地实现所需效果。我认为你最好不要组合4个div来包围目标元素。
答案 1 :(得分：1)
如果您突出显示的元素位于距背景低z-index的其他元素（堆叠上下文）内，则它不会显示高于背景，因为元素仅为z-index控制该父级内的堆叠顺序。
唯一的好解决方案是克隆突出显示的元素并将克隆添加到<body>标记
谨防继承的CSS样式，否则会丢失。