CSS将一个div直接放在另一个div上

Question

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

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

我从一些复杂的javascript开始，以确定我的div的大小和位置，并在其上创建一个新的。 脚本给出的大小和位置看起来与我的眼睛大致相同，但重叠div被放在错误的位置。

然后我意识到（可能）有一种更简单的方法可以做到这一点。

我在div 里面放了一个带有“停电”等级的div我要黑了。 停电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

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

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

您需要添加position: relative对于父div 。

这会将父div设置为.blackout的“包含块”：

如果position属性的值是absolute ，则包含块是最近的定位祖先 - 换句话说，最近的祖先，其position属性具有absolute ， fixed值或relative值之一。

点击此处了解更多信息： http ： //reference.sitepoint.com/css/containingblock

Answer 2

使用“position：absolute”将其相对于下一个“position：relative”div进行定位。 如果没有一套，那么它将使用身体。

你需要让父div包含“position：relative”

Answer 3

在父div的CSS上：

overflow: hidden;

应该管用

Answer 4

添加position: relative对于父div， overflow: hidden只会隐藏父div的外部

Answer 5

改变position: absolute; position: relative;

Answer 6

将子<div> width和height设置为100％并删除无用的标记。

http://jsfiddle.net/MvPHj/