定位核心作用：手动控制盒子在页面上的位置，脱离正常文档流，搭配 top / right / bottom / left 偏移属性
文档流：页面元素默认从上到下、从左到右排队布局的规则
position 一共 5 个取值：
static：静态定位（默认）relative：相对定位absolute：绝对定位fixed：固定定位sticky：粘性定位
配套偏移属性（四个，单位用 px）： top、left、right、bottom → 代表距离参考点的距离
一般只用一组：优先
top + left或者bottom + right，不要四个一起写，容易冲突
还有两个高频搭配属性：
z-index：层级（堆叠顺序），只有定位元素生效，数字越大越靠上，默认 0，可以负数position定位 +margin也可以微调位置
1. static 静态定位（默认值）
所有元素默认就是 static，不开启定位
-
遵循正常文档流
-
top/left/z-index全部无效.box {
position: static;
}
✅ 用途：取消已经加的定位，恢复默认
2. relative 相对定位
参考点：自己原来在文档流里的位置 特点：
-
不脱离文档流，原来占的位置还保留着，别的元素不会挤过来
-
只是视觉上挪位置，本体占位不变
-
偏移：top 向左上、left 向左上
-
最常用搭配：给绝对定位当父级参照物（子绝父相）
.box {
position: relative;
top: 10px; /* 向下挪10px /
left: 20px; / 向右挪20px */
}
💡 口诀：相对定位，原地留坑，自己动
3. absolute 绝对定位【重点】
参考点：最近一个设置了非 static 定位的父元素 如果所有父级都没有定位，就参考根元素
<html>（浏览器可视区） 特点：
-
脱离文档流！不占位置，原来的空间直接释放，后面元素会顶上来
-
必须配合
top/left才会移动 -
经典用法：子绝父相（父 relative，子 absolute）
.father {
position: relative; /* 父：相对，留坑，作为参照物 /
width: 300px;
height: 300px;
}
.son {
position: absolute; / 子：绝对，脱离流 */
top: 0;
left: 0;
}
💡 口诀：绝对定位，找爹定位，坑没了
小技巧：让盒子在父盒子水平垂直居中
.son{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}4. fixed 固定定位
参考点：浏览器视口（浏览器窗口） 特点：
-
脱离文档流，不占位置
-
页面滚动，盒子位置纹丝不动 ✅ 常见场景：回到顶部按钮、导航栏、侧边客服
.backtop {
position: fixed;
bottom: 30px;
right: 30px;
}
💡 口诀：固定定位，钉在窗口，滚动不动
⚠️ 坑：fixed 不受父元素影响，哪怕父盒子加 relative，它依旧认浏览器窗口
5. sticky 粘性定位（理解为 relative + fixed 结合）
参考点：默认自己原位置；滚动触发后变成 fixed 效果 特点：
-
没有滚动到阈值时：relative（占位置）
-
页面滚动，碰到你设置的
top阈值 → 变成 fixed 粘在窗口上 -
必须指定
top / left其中一个，否则不生效 ✅ 场景：滚动吸顶导航.nav {
position: sticky;
top: 0; /* 距离窗口顶部0px的时候粘住 */
}
💡 坑：sticky 受父容器限制，父盒子滚出屏幕，sticky 元素跟着消失
z-index 堆叠层级（非常容易踩坑）
规则：
-
只对 position≠static 的元素生效，static 元素用不了 z-index
-
数值越大，越在上层；默认
z-index:auto≈ 0 -
父子层级陷阱：父元素 z-index 小，子再大也盖不住别人
.a{ position:relative; z-index:1; }
.b{ position:relative; z-index:2; }
b 在 a 上面
建议：z-index 不要写 9999 这种超大值，容易后期层级混乱