css - 通过滚动在绝对 div 内移动

Question

我有一个带有 overflow: scroll 和大量文本的 div。然后是 position: absolute 和 100% 高度和宽度的第二个 div。是否可以做到，当您向下滚动时，内部 div 也向下移动，因此它始终覆盖外部 div 的整个可见 View ，只有 css 或我需要使用 javascript？

这是一个 example您可以在其中看到，向下滚动时，div 内部留在顶部。

CSS:

.test1 {
    position: relative;
    height: 200px;
    width: 500px;
    overflow: scroll;
    background: green;
}
.test2 {
    position: absolute;
    opacity: 0.5;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: red;
}

HTML:

<div class="test1">
    <div class="test2"></div>
    Lot of text
</div>

Answer 1

这是你想要的吗？ Demo

.test1 {
    position: relative;
    height: 200px;
    width: 500px;
    overflow: scroll;
    background: green;
}
.test2 {
    position: fixed;
    opacity: 0.5;
    height: 185px;
    width: 485px;
    background: red;
}