CSS如何将一个div直接覆盖在另一个div上方

Question

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

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

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

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

我将一个带有类"blackout"的

放在我想要黑掉的

中。 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？

- Ozzah

Answer 1

这将使整个屏幕填满而不仅仅是父div。

您需要在父div中添加position:relative。

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

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

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

- thirtydot

---

你也可以使用 :after 代替一个 <div>。 - Derek 朕會功夫

@Derek：在这里使用:after并不是一个好主意。他想要使用JavaScript来控制它，而伪元素很难通过JavaScript进行控制。 - thirtydot

Answer 2

使用“position:absolute”会将其定位与下一个“position:relative”的div相关联。如果没有设置，则将使用body。

需要使父div的CSS包含“position:relative”。

- Matthew Dolman

Answer 3

在父元素的 CSS 中：

overflow: hidden;

应该可以工作

- Joe

Answer 4

添加 position: relative 到父级 div，overflow: hidden 只会隐藏父级 div 外部的内容。

- Guillaume

Answer 5

将 position: absolute; 改为 position: relative;

- Paul

Answer 6

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

http://jsfiddle.net/MvPHj/

- Stan