我想用伪元素覆盖来覆盖动态滚动内容的 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 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
