要实现“保持溢出滚动后的绝对位置不变”,可以使用CSS的position: sticky
属性。该属性可以使元素在滚动到特定位置时固定在容器中的位置,而不会随着滚动而改变位置。
下面是一个示例代码,演示如何使用position: sticky
属性实现保持溢出滚动后的绝对位置不变:
HTML代码:
我是sticky元素
CSS代码:
.container {
height: 300px; /* 设置容器的高度 */
overflow-y: auto; /* 开启垂直溢出滚动 */
position: relative; /* 设置容器为相对定位 */
}
.sticky-element {
position: sticky;
top: 20px; /* 设置sticky元素相对于容器顶部的偏移量 */
background-color: #ccc;
padding: 10px;
}
.content {
/* 这里可以设置内容的样式和高度 */
}
在上面的示例中,.container
元素是一个固定高度的容器,使用overflow-y: auto
属性使其内容溢出时出现垂直滚动条。
.sticky-element
是要保持位置不变的元素,使用position: sticky
属性将其设置为sticky元素,并使用top
属性设置相对于容器顶部的偏移量。
当内容滚动时,.sticky-element
将保持在容器顶部的位置,不会随着滚动而移动。
注意:position: sticky
属性在部分浏览器中可能不支持,请根据需要使用浏览器兼容性来决定是否使用该属性。