如何使用纯CSS来覆盖填充可滚动父级？

Question

这是一个简单的例子：

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

JsFiddle

红色叠加层应完全填充父容器。 .long的高度事先不知道。 .has-scrollbar div仍然可以滚动（并且不被覆盖）。

在position: fixed上使用.overlay的任何解决方案都不太可行。现实世界的情景要复杂得多。考虑.has-scrollbar中body的位置，也不提前知道。

Answer 1

所以你不了解long，但似乎你控制了has-scrollbar，所以你可以修复overlay并将它放在与{{{{1}相同的位置1}}：

has-scrollbar

Updated JSFiddle.