前端 CSS 精讲 06：定位（position）彻底吃透 —— 实现悬浮、吸顶、覆盖层必备
文章目录
- 一、定位的五个取值
- 二、relative 相对定位
- 三、absolute 绝对定位（高频核心）
- 四、fixed 固定定位
- 五、sticky 粘性定位（吸顶神器）
- 六、定位偏移方位
- 七、层级控制 z-index
- 八、定位常见经典布局
- 1. 角标（右上角小红点）
- 2. 弹窗遮罩
- 3. 水平垂直居中（定位版）
- 九、高频避坑总结
- 十、本节小结
大家好，我是代码搬运董，软件专业在读、前端预备攻城狮，专注用通俗的话拆解硬核前端知识。
前面我们讲了标准流、Flex、Grid，都是“正常排版”。
但很多场景：返回顶部按钮、弹窗遮罩、导航吸顶、子元素飘在父元素右上角，正常布局做不到，必须用position 定位。
一、定位的五个取值
static默认值，标准流relative相对定位absolute绝对定位fixed固定定位sticky粘性定位（吸顶）
二、relative 相对定位
相对于自己原来的位置进行偏移。
特点：
- 不脱离标准流，原来占的位置还在
- 对其他元素没有任何影响
- 经常用来给绝对定位当“爹”
.box{p