03定位
浮动只能「靠边站」，position 定位却能精确到像素：把元素「钉」在你指定的坐标上。
弹窗、角标、吸顶导航、返回顶部按钮，背后全是定位。本课的核心只有一件事——
搞清楚每个定位值的「参照物」是谁。
一、position 五种取值总览
position 一共五个取值。看懂这张表，定位就懂了一大半——
注意「是否脱离文档流」和「参照物」两列，它们决定了一切行为差异：
| 取值 | 脱离文档流 | 定位参照物 | 典型用途 |
|---|---|---|---|
| static | 否（默认值） | 无——写 top/left 也没用 | 普通文档流元素 |
| relative | 否（占位保留） | 自己在文档流中的原位置 | 微调位置、给 absolute 当参照物 |
| absolute | 是（不占位） | 最近的非 static 祖先（没有则相对页面初始包含块） | 弹窗、角标、气泡、精确居中 |
| fixed | 是（不占位） | 浏览器视口（滚动条滚不动它） | 返回顶部、吸顶广告、悬浮客服 |
| sticky | 否（滚动前在流内） | 最近的滚动容器 + top 等阈值 | 表头吸顶、通讯录字母条 |
二、static 默认与 relative 相对定位
不写 position 时元素就是 static，老老实实待在文档流里，
此时 top / left 这些偏移属性对它完全无效。
relative 则是「保留占位的挪动」：
元素还在文档流里，原来的位置照常留空（不会被兄弟元素补位），再相对这个原位置偏移。
left: 30px 改成 -30px，它立刻朝左反方向挪top: 16px 是「顶边离原位置 16px」→ 盒子向下动；
left: 30px 是「左边离原位置 30px」→ 盒子向右动。想让盒子朝反方向走，用负值。relative 单独用的场景不多（小图标微调、盖层），它更重要的角色是—— 给 absolute 当参照物，这是下一节的主角。
三、absolute 绝对定位：找「最近的非 static 祖先」
absolute 是定位家族的核心，两条铁律：
- 不占位：元素彻底脱离文档流，兄弟元素当它不存在，直接补位；
- 参照物是「最近的非 static 祖先」：从父级往上逐层找，第一个 position 不是 static 的祖先（relative / absolute / fixed / sticky 都算）就是它的坐标原点；一个都没有，就相对整个页面（初始包含块）。
这就是著名的参照物链：同一个 absolute 子元素，祖先里谁设了定位，它就贴着谁。 对比下面两个演示——唯一的差别是「中间层有没有 position: relative」：
.ps-chain .case-b .mid 里的 position: relative 删掉，红标签立刻跳到绿框左上角四、absolute 实战：角标与绝对定位居中
两个最高频的 absolute 用法。角标：把小徽章钉在卡片右上角，负偏移让它「跨出」卡片边缘；
居中：left: 50%; top: 50% 把左上角送到中心，再用 translate(-50%,-50%) 退回自身一半（第 01 课学过的万能居中，这里正是它的主战场）。
.ps-badge 的 top 改成 0，角标立刻贴进卡片内沿五、fixed 固定定位：钉在视口上
fixed 的参照物是浏览器视口（viewport）——就是你现在看到的这块屏幕区域。
页面滚动条怎么滚，它都纹丝不动，因此天然适合「返回顶部按钮」「吸顶广告条」「悬浮客服」这类元素。
它同样脱离文档流、不占位。
.ps-fx-btn 的 bottom 改成 40px，按钮立刻上移transform、filter 等属性，
参照物会从视口变成那个祖先，「钉在屏幕上」就失效了——弹窗组件里最常见这个 bug。六、sticky 粘性定位：滚到才粘住
sticky 是五个值里最年轻的，可以理解为
relative 和 fixed 的合体：平时待在文档流里（relative 状态），
滚动到设定的阈值（如 top: 0）时「粘」在滚动容器边缘不再走（fixed 状态）。
注意它必须配合 top/right/bottom/left 之一才生效，且粘附范围不超过父元素。
top: 0 改成 top: 24px，字母条就粘在离顶 24px 处| 对比项 | relative | sticky | fixed |
|---|---|---|---|
| 平时位置 | 原位置偏移 | 文档流内原位置 | 相对视口 |
| 何时偏移 | 始终 | 滚动到阈值后 | 始终 |
| 是否占位 | 占位 | 滚动前占位 | 不占位 |
| 参照物 | 自己原位置 | 滚动容器 | 视口（除非祖先 transform） |
| 适用 | 微调 | 表头吸顶 / 字母导航 | 返回顶部 / 悬浮 |
七、偏移属性与 z-index 层叠顺序
top / right / bottom / left 四个偏移属性负责「钉在哪」：
它们只在定位元素（非 static）身上生效，规定元素对应边缘与参照物对应边的距离，正值朝内、负值朝外。
当元素同时写了相对的两个（如 left 和 right）且没定宽，就会「被拉伸」占满这段空间。
| 属性 | 作用 | 常用值 | 备注 |
|---|---|---|---|
| top / bottom | 元素顶边 / 底边离参照物的距离 | px、%、auto | bottom 正值 = 贴底往上量 |
| left / right | 元素左边 / 右边离参照物的距离 | px、%、auto | right 正值 = 贴右往左量 |
| z-index | 层叠顺序：谁盖谁 | 整数（可负），auto | 只对定位元素和 flex/grid 子项生效 |
z-index 解决「盒子叠盒子时谁在上面」：数值大者在上；
数值相同则HTML 里后写的在上（后来者居上）。下面三张卡片故意叠放，试着改它们的 z-index：
.ps-z-stage .b 的 z-index 改成 9，橙卡立刻翻到最上层八、本章小结
- 五种定位：
static默认流内；relative原地偏移、占位保留；absolute不占位、贴最近的非 static 祖先；fixed不占位、钉在视口；sticky滚动到阈值才粘住。 - 参照物链是 absolute 的命门：父 relative + 子 absolute 是标配写法。
- 角标 = absolute + 负偏移；万能居中 = left/top: 50% + translate(-50%,-50%)。
- fixed 做返回顶部与吸顶；sticky 做表头与字母导航，必须写 top 阈值。
- 偏移属性 top/right/bottom/left 只对定位元素生效；
z-index大者在上、同值后来者在上。 - 记住口诀：static 是路人，relative 原地挪，absolute 找定位祖先，fixed 钉屏幕，sticky 滚到粘。