html - 子元素 100% 大小的父内容

Question

我有什么:

具有固定大小但动态内容大小和 overflow: scroll; 的 block 元素。

我想要什么:

内容上方的透明层，因此无论父级滚动多远，该层都会覆盖内容。

我尝试了什么:

.layer {
  position: relative;
  width: 100%;
  height: 100%;
  bottom: 100%;
  z-index: 20;
}

在父内容之后。

问题:

该层正确地覆盖了父级，但是一旦我滚动它就不会覆盖内容。

fiddle :

http://jsfiddle.net/wYgWh/2/

红色应该覆盖一切，但不要过多；

Answer 1

Height: 100%; 赋予元素与其父元素相同的高度。 你定义的parent没有你想覆盖的内容那么高。

如果您将“层”放在标记中的“内容”内，您就可以相对于“内容”绝对定位它。所以现在 height: 100% 将与内容相关，而不是“父级”(滚动窗口)。

此外，当您想要绝对定位某物时，该元素将与其最近的非静态父元素相关。

这是 fiddle .