使用 CSS 和 z-index 创建页面叠加，然后将一个元素放在叠加层的顶部

Question

如何在页面上放置叠加层，同时选择要放置在叠加层顶部的特定元素？

例如，在整个

页面上放置一个深色叠加层，并在其顶部放置一个按钮。 这将突出显示该按钮。 您可以在介绍中看到此效果的演示.js

我尝试过：

我在这个jsfiddle中尝试过，但它不起作用。

基本上，我通过做position: fixed; z-index: 100;来制作一个覆盖div，并通过赋予它position: relative; z-index: 101;让一个元素闪耀它。但出于某种原因，我的内部div 仍然显示在叠加层下方而不是顶部，尽管 z 指数高于叠加层。

如何定位这些元素，以便inner显示在overlay的顶部？

介绍JS似乎如何工作...对照 Z 指数规范

IntroJS 有一个带有 z-index 的叠加层：99998，然后突出显示的元素应用了类，使其具有position: relative; z-index: 99999;。考虑到堆叠的工作原理，我们认为这是行不通的......但它确实如此。

Answer 1

他最初的小提琴作品。 这是一个着色问题。 显示具有不同颜色的叠加层时，请确保您使用的两种颜色在视觉上不相似，以免再次发生此错误。

最终，position: relative确实会创建一个新的堆叠上下文。 试图挽回面子是没有意义的。

我会把以下内容留给我的傲慢，以为我知道一些介绍.js没有

呜。 这个很有趣。

所以你已经陷入了旧的堆叠上下文问题。

简而言之，你想做的事情，你做不到。

小提琴来了！

在这个小提琴中：

我们更改了一些 CSS

.container {
    background: red;
    height: 100px;
    position: relative;
}
.inner {
    z-index: 99999;
    position: absolute;
    margin-top: 10px;
    width: 100%;
    background: green;
    height: 30px;
}

这是做什么

基本上，它会弹出您的堆栈以与您的 .overlay 元素相等。

.container元素上的position: relative确保当我们在.inner元素上弹出position:absolute时，它会保留在应有的位置，但如果要删除它，.inner元素仍将弹出在您的覆盖层上方。很迷人，对吧？ 写完后，我会在编辑中解释原因，但我想在有人狙击我的正确答案之前把它告诉你。

width:100%使元素保持显示，就像它在流中正常呈现一样。

为了让它取代流中的其他元素，你需要采取额外的措施，我需要看到一些上下文示例。

不过，这应该为您解决。