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