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%将与内容相关而不是“父”（滚动窗口）。

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

这是fiddle。

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;
}

儿童元素父母内容的100％大小

3 个答案: