定位布局 (Position)
使用position属性进行精确定位,可相对于父元素、视口或初始包含块定位。
定位类型
| 属性值 | 说明 | 参考对象 |
|---|---|---|
relative |
相对定位 | 自身原始位置 |
absolute |
绝对定位 | 最近定位祖先 |
fixed |
固定定位 | 视口 |
sticky |
粘性定位 | 滚动容器 |
应用场景
适用:固定导航栏、弹出层、悬浮按钮、地图标记、视差滚动效果
示意图
absolute
absolute
fixed
sticky
relative + absolute/fixed/sticky 精确定位