要将一个固定的Div显示在另一个Div后面的底部,实现视差效果,可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<div class="container">
<div class="fixed-div"></div>
<div class="scroll-div">
<!-- 添加内容使其超出容器高度 -->
</div>
</div>
CSS:
.container {
position: relative;
height: 400px; /* 设置容器高度 */
overflow: auto; /* 添加滚动条 */
}
.fixed-div {
position: absolute;
bottom: 0;
height: 100px; /* 设置固定Div的高度 */
width: 100%; /* 设置固定Div的宽度 */
background-color: #ccc; /* 设置固定Div的背景色 */
}
.scroll-div {
position: relative;
height: 800px; /* 设置滚动Div的高度,超出容器高度 */
width: 100%; /* 设置滚动Div的宽度 */
background-color: #f5f5f5; /* 设置滚动Div的背景色 */
transform: translateY(-50px); /* 向上移动一定距离 */
}
这样,固定的Div就会显示在滚动的Div后面的底部,并且可以通过滚动滚动条来查看滚动的Div的内容,实现视差效果。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云