要实现保持背景div固定,同时允许另一个div以覆盖层的形式滚动,可以使用CSS的position属性和z-index属性。以下是一个示例代码:
HTML代码:
CSS代码:
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(background-image.jpg) no-repeat center;
background-size: cover;
}
.overlay {
position: relative;
z-index: 1;
height: 100vh;
overflow-y: scroll;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
background: rgba(255, 255, 255, 0.8);
margin-bottom: 10px;
}
在这个示例中,我们使用了两个div,一个用于背景图像,另一个用作覆盖层。背景div使用position: fixed将其固定在页面上,而覆盖div使用position: relative和z-index属性将其放在背景div之上。覆盖div设置了固定的高度,并使用overflow-y: scroll属性来实现滚动。
注意:示例中的背景图像使用了background-image.jpg,请根据自己的实际情况进行替换。
下一篇:保持背景可控的同时重叠DIVs