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

【问题标题】：CSS Place one div directly over anotherCSS 将一个 div 直接放在另一个上
【发布时间】：2011-07-24 23:48:26
【问题描述】：

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

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

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

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

我将一个带有“停电”类的 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？

【问题讨论】：

标签： javascript html css position positioning

【解决方案1】：

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

我需要进行哪些更改才能使其仅填充父 div？

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

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

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

在此处阅读更多信息：http://reference.sitepoint.com/css/containingblock

【讨论】：

你也可以使用 :after 代替<div>。
@Derek：在这里使用:after 是个坏主意。他想用JavaScript来控制它，而伪元素很难用JavaScript来控制。

【解决方案2】：

使用“position:absolute”相对于下一个“position:relative”div 定位它。如果没有一套，则使用正文。

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

【讨论】：

【解决方案3】：

在父 div 的 CSS 上：

overflow: hidden;

应该工作

【讨论】：

【解决方案4】：

将position: relative添加到父div，overflow: hidden只会隐藏你父div的外部

【讨论】：

【解决方案5】：

将position: absolute; 更改为position: relative;

【讨论】：

【解决方案6】：

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

http://jsfiddle.net/MvPHj/

【讨论】：