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

Question

我有的：

具有固定大小但动态内容大小和overflow: scroll;.

我想要的是：

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

我尝试了什么：

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

在内容之后的父级内部。

问题：

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

小提琴：

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

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

Answer 1

Height: 100%;给元素与它的父元素相同的高度。您定义的父级没有您要覆盖的内容那么高。

如果将“图层”放在标记中的“内容”中，则可以相对于“内容”进行绝对定位。所以现在height: 100%将与内容而不是“父”（滚动窗口）相关。

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

这是小提琴。

Answer 2

尝试这个：

HTML：

<div class="coverable">
   <div class="layer"></div>
   Content that gets covered!
</div>

CSS：

.coverable {
  position: relative;
}
.coverable .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 100%;
  z-index: 20;
}

Answer 3

需要做

.layer {
position: fixed;
}