스크롤과 함께 절대 div로 이동

Question

overflow: scroll과 텍스트가 많은 div가 하나 있습니다. 그런 다음 두 번째 div 내부는 position: absolute이고 높이와 너비는 100 %입니다. 가능하다면 아래로 스크롤 할 때 div 내부도 움직여서 항상 외부 div의 전체 가시적 인보기를 CSS로만 덮어 두거나 자바 스크립트를 사용해야합니다.

여기에서 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; 
}