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

Question

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

例如，在整个页面上放置一个黑色叠加层，然后让一个按钮位于其上方。这将突出显示按钮。您可以在intro.js

中看到此效果的演示

我尝试过的事情：

我在jsfiddle尝试了它，但它没有用。

基本上我通过position: fixed; z-index: 100;制作叠加div，并让一个元素通过赋予它position: relative; z-index: 101;来照亮它。但由于某些原因，尽管z-index比叠加层更高，但我的内部div仍显示在叠加层下方而不是ontop上。

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

introJS如何运作......针对z-index规范

IntroJS具有z-index：99998的叠加层，然后突出显示的元素应用了赋予它position: relative; z-index: 99999;的类。考虑到堆叠是如何工作的，我们不会认为这会起作用......但确实如此。

Answer 1

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

最终，position: relative 会创建新的堆叠上下文。试图挽回面子毫无意义。

我会把记忆中的以下内容留给我狂妄自大，以为我知道intro.js没有

呜呜！这个很有趣。

所以你已经陷入了旧的 stacking context problem 。

简而言之，你要做的是什么，你做不到。

<强> Fiddle incoming!

在这个小提琴中：

我们更改了一些CSS

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

这是做什么

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

position: relative元素上的.container可确保当我们在position:absolute元素上弹出.inner时，它会保留在应有的位置，但是如果要将其删除，.inner元素仍会在您的叠加层上方弹出。很有意思吧？我会在编辑之后解释为什么在编辑中，但是在有人嘲笑我的正确答案之前，我想把它告诉你。

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

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

但是应该为你解决这个问题。