我怎样才能在所有其他元素前面有一个透明的 <div>

Question

所以我试图在页面顶部创建一个 div alpha:0 并有一个动画到 "darken" 网站的其余部分，顶部有一个弹出窗口.

虽然这在理论上听起来很容易做到，但我一直在摆弄位置 absolute/relative/fixed 来尝试实现这一点，但没有成功。

我现在拥有的是一个元素中的一个元素，我的问题是我无法将它带到网页的后面，即使使用 z-index。

在任何其他元素上设置透明 div 最简单的解决方案是什么？（弹出窗口除外）

我目前的代码：

<body>
    <div position="fixed" style="background-color: rgba(0, 0, 0, 1); border: 1px solid green; height: 100vh; width: 100vw; top:0; z-index: 10">
        <div position="absolute" class="header" id="header" style="border:1px solid green; background-color: white; height:30px; width:250px; top:0; z-index: -1"></div>
    </div>
</body>

Answer 1

将叠加层写在另一个 div 的下方，并将它们都放在 position: absolute; 中。如果您想要叠加层上方的任何内容，请使用相同的逻辑。在叠加层下方添加另一个 div。您也可以在叠加层中添加。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

<body>

  <!-- your content -->
  <div class="header" id="header" style="position: absolute;border:1px solid green; background-color: white; height:30px; width:250px;">
  </div>

  <!-- the overlay -->
  <div style="position: absolute; background-color: rgba(0, 0, 0, 0.8); border: 1px solid green; height: 100%; width: 100%;">
  </div>

</body>

另请注意，我将 position: absolute; 移到了样式中。顺便说一句，你应该再次将它移动到 css 文件 :)

Answer 2

这里有一个有效的代码：

<body>
    <div style="position: fixed; display: block; z-index: 2;  height: 100vh; width: 100vw; background-color: transparent; top: 0px; left: 0px;"></div>
    <p id="objectInBackground">The text you want to hide</p>
</body>

我怎样才能在所有其他元素前面有一个透明的 <div>

How can I have a transparent <div> in front of every other element

html

css

layout

overlay

positioning