一、粘性布局
position: sticky
配合 [left
,right
,top
,bottom
] 中一个即可实现粘性布局
二、坑
- 粘性布局只在其父元素空间内生效,且要实现 “粘性” 效果,对其父元素有以下要求,否则粘性效果会失效
(1)必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小(例如子元素设置top
/bottom
粘垂直轴,父元素的高度需要大于子元素的高度,这样才有可以活动的空间嘛)
(2)父元素中不能设置overflow: hidden
或overflow: auto
- 未同时设置 [
left
,right
,top
,bottom
] 中一个会使得粘性效果消失 sticky
粘性效果失效时,其表现与relative
差不多