I would like to cover a div with dynamic scrolling content with a pseudo element overlay.
The issue I have encountered is the overlay scrolls with the content, leaving any content below the fold naked.
How can I allow the overlay to remain in place as the content below it scrolls?
.wantOverlay {
width: 200px;
height: 100px;
overflow-y: scroll;
position: relative;
}
.wantOverlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(150, 150, 150, .45);
}<div class="wantOverlay">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
<div>Unfortunately any text past this point no longer has the overlay.</div>
<div>This text no longer has the overlay.</div>
</div>