Question

<div class="shouldBeOverlapped">
content
</div>

现在我想在它上面添加另一个div（例如等待），所以它将100％覆盖它并使其无法点击，最好是透明的。怎么做？

Answer 1

尝试搜索“叠加层”。这将是正确的。

此处示例：

#overlay {
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="shouldBeOverlapped">
content
</div>
<div id="overlay"></div>

Answer 2

您可以尝试将等待的div作为:before。虽然它有限，但可以很容易地进行设置。

#textToHide {
  background: yellow;
  position: relative;
  width: 300px;
  padding: 10px;
}

#textToHide:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<div id="textToHide">
This text is protected against selection... although we could still look for it in the source code...
</div>

Answer 3

您需要包含div元素，并将其位置属性设置为relative。这定义了叠加的边界。没有它，叠加层将查找DOM，直到它找到一个父级，它可以从中获取它的定位信息。如果它找不到，它将覆盖整个页面主体。

我在这里为你创建了一个JSFiddle：https://jsfiddle.net/aogd164t/

尝试从position: relative课程中删除container并查看结果。

如何在另一个上添加等待div？

3 个答案: