gpt4 book ai didi

html - 可滚动 div 内的叠加层未正确显示

转载 作者:行者123 更新时间:2023-11-28 19:20:17 25 4
gpt4 key购买 nike

<分区>

我有一个可滚动的 div。在这个 div 中,我有一个绝对定位的叠加层。可悲的是,这个叠加层卡在了顶部。所以当我向下滚动时,叠加层停留在顶部:

.list {
height: 300px;
width: 300px;
overflow: scroll;
overflow-x: hidden;
font-size: 12px;
position: relative;
border: 2px solid;
}

span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 12px;
height: 33px;
background: red;
}

span:nth-child(2n) {
background: blue;
}

.overlay {
z-index: 1000;
border: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgb(255, 255, 255);
opacity: 0.8;
cursor: default;
position: absolute;
}
<div class="list">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div class="overlay"></div>
</div>

当用户按下按钮时,叠加层就会可见。当他不向下滚动时,一切看起来都不错,但当他向下滚动时,却没有。那么知道如何在整个可滚动的 div 元素上扩展覆盖吗?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com