Html 如何使用纯CSS获得覆盖以填充可滚动的父级？

下面是一个简单的例子：

<div class = "has-scrollbar">
    <div class = "long"></div>
    <div class = "overlay"></div>
</div>

.has-scrollbar {
    width: 200px;
    height: 100px;
    overflow-y: scroll;
    position: relative;
}

.long {
    height: 200px;
    width: 50px;
    background: blue;
}

.overlay {
    width: 100%;
    height: 100%;
    background: red;
    opacity: 0.5;
    position: absolute;
    top: 0;
}

.有滚动条{
宽度：200px；
高度：100px；
溢出y：滚动；
位置：相对位置；
}
.朗{
高度：200px；
宽度：50px；
背景：蓝色；
}
.覆盖{
宽度：100%；
身高：100%；
背景：红色；
不透明度：0.5；
位置：绝对位置；
排名：0；
}

红色覆盖层应完全填满父容器。

.long

的高度事先未知。

.has scrollbar

div仍应可滚动（且未被覆盖）

---

在

上使用
位置：fixed
的任何解决方案都不太可能起作用。现实世界的情况要复杂得多。考虑<代码>的位置。在<代码>正文< /代码>中有滚动条< /代码>，也不预先知道。
 < p> >您不知道“代码>长”，但似乎您控制“<代码>有滚动条< /代码>，因此您可以使<代码>覆盖/ <代码>固定并定位在与<代码>相同的地方，滚动条< /代码>：

.overlay {
    height: 100px;
    margin-top: 8px; /* just to compensate for body margin in the example */
    pointer-events: none; /* mouse events will pass through */
    position: fixed;
    width: 200px;
}

我忘了给这个问题再添加一个约束-has scrollbar div应该仍然是可滚动的（并且没有包括在内）。谢谢你！我添加了一个css规则来传递鼠标事件：）不幸的是，我需要一个css规则来阻止与下面内容的交互。我最终使用的解决方案是
位置：固定的，所以你得到了要点：）