通过滚动在绝对div内移动

Question

我有一个overflow: scroll的div和很多文字。然后第二个div内部position: absolute和100％的高度和宽度。是否可以这样做，当你向下滚动时，div内部也向下移动，所以它总是覆盖外部div的整个可见视图，只有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;
}