移动绝对div滚动

Question

我有一个div与overflow: scroll和大量的文字。然后第二个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; 
}