我想用伪元素覆盖覆盖动态滚动内容的 div。
我遇到的问题是覆盖滚动内容,使折叠下方的所有内容都裸露。
如何让叠加层在其下方的内容滚动时保持原位?
.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>
最佳答案
position: sticky;
带有负 margin-top
就可以了。这是有关 sticky
的详细信息 https://developer.mozilla.org/tr/docs/Web/CSS/position
.wantOverlay {
width: 200px;
height: 100px;
overflow-y: scroll;
position: relative;
}
.wantOverlay::after {
display: block;
content: ' ';
position: sticky;
left: 0;
top: 0;
margin-top: -100%;
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>
关于css - 使用伪元素覆盖滚动的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45624147/