全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

介绍下粘性布局(sticky)

发布时间:2022-09-30 10:56:01
发布人:wjy

  position 中的 sticky 值是 CSS3 新增的,设置了 sticky 值后,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

介绍下粘性布局

  sticky 属性值有以下几个特点:

  该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。

相关文章

nn.Linear()和nn.Embedding()有什么区别?

nn.Linear()和nn.Embedding()有什么区别?

2023-10-14
敏捷开发和迭代式开发的根本区别是什么?

敏捷开发和迭代式开发的根本区别是什么?

2023-10-14
flutter和uni-app在应用层面有什么区别?

flutter和uni-app在应用层面有什么区别?

2023-10-14
Flutter和 qt的区别都有什么?

Flutter和 qt的区别都有什么?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取