我怎样才能在所有其他元素前面有一个透明的 <div> [重复]答案

【问题标题】：How can I have a transparent <div> in front of every other element [duplicate]我怎样才能在所有其他元素前面有一个透明的 <div> [重复]
【发布时间】：2020-03-10 10:13:04
【问题描述】：

所以我试图在页面顶部创建一个 alpha:0 的 div，并在顶部有一个弹出窗口来“变暗”网站的其余部分。

虽然这在理论上听起来很容易做到，但我一直在摆弄绝对/相对/固定位置以尝试实现这一目标，但没有成功。

我现在拥有的是一个元素中的一个元素，我的问题是我无法将它带到网页的后面，即使使用 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>

【问题讨论】：

标签： html css layout overlay positioning

【解决方案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 文件:)

【讨论】：

我之前尝试过一个在另一个之下，但冲突似乎是在“样式”标签而不是 HTML 属性中设置元素的位置。当我有
时，它只会将它渲染到覆盖之外。谢谢！
@JoãoDrake 我很高兴你知道了。

【解决方案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>

【讨论】：