Question

我有一个div，其中包含一些内容，用户可以选择单击“x”来说“这不适用于我”，例如。

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

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

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

我在div中设置了一个div“blackout”里面我要黑掉的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，则包含 block是最近的祖先 - 换句话说，就是最近的祖先其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/

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

6 个答案: