粘性定位position:sticky的使用

发布时间:2023年12月19日

前提问题:弹窗中内容进行滚动时,设置下方按钮不允许滚动
解决过程:使用粘性布局,position:sticky,也称粘性定位。
1.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进行偏移。
2.该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
3.元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于屏幕范围(viewport)视口来计算元素的偏移量
4.当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。
解决结果:

.explame{
    position: sticky;?
    left:0;
    top: 20px;
}

设置了top:20px,当sticky元素到达距离相对定位的元素顶部20px的位置时固定,不再向上移动

.explame{
    position: sticky;?
    bottom:0px;
}

设置了bottom:0px,当sticky元素到达距离相对定位的元素底部0px的位置时固定,不再向下移动,可以理解为固定在底部,不参与滚动

文章来源:https://blog.csdn.net/m0_75107188/article/details/133901837
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。