css 粘性布局

一、粘性布局

1. position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局

二、坑

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