javascript - CSS 将一个 div 直接放在另一个之上

Question

我有一个 div，里面有一些东西，例如，用户可以选择单击“x”来表示“这不适用于我”。

我不想删除 div，而是想在它上面播放一个半透明的 div。

我开始使用一些复杂的 javascript 来确定我有问题的 div 的大小和位置，并在其上创建一个新的。脚本给出的大小和位置在我看来大致正确，但重叠的 div 被放在了错误的位置。

然后我意识到(可能)有一种更简单的方法来做到这一点。

我将类为“blackout”的 div 放在我想要涂黑的 div 中。 blackout css 类的可见性设置为隐藏，因此 javascript 会在需要时将其设置为可见。

我遇到的问题是，即使使用这种方法，我似乎也无法让它精确地填充父 div 的矩形。

我有

.blackout
{
  position: absolute;

  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;

  background-color: black;

  opacity: 0.5;
  filter: alpha(opacity = 50);
}

这会填满整个屏幕，而不仅仅是父 div。

我需要更改什么才能使其仅填充父 div？

Answer 1

This filled up the whole screen rather than just the parent div.

What do I need to change to make it fill the parent div only?

您需要将position: relative 添加到父级div。

这会将父 div 设置为 .blackout 的“包含 block ”:

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative.

在这里阅读更多:http://reference.sitepoint.com/css/containingblock