CSS定位需先理清前提与参照系：relative是absolute的锚点，absolute相对最近已定位祖先，fixed相对视口，sticky需设top且父容器不能overflow隐藏。
初学 CSS 定位时，很多人一上来就猛用 absolute 或直接套 fixed，结果页面错位、元素消失、父容器塌陷、滚动异常……问题不断。根本原因不是属性难，而是没理清定位的“前提条件”和“参照系”。先扎实理解 relative、absolute、fixed、sticky 各自的触发逻辑和依赖关系，才能少踩坑。
relative 不是“微调工具”，而是 absolute 的“定位锚点”
position: relative 本身不改变文档流，但它有两个关键作用：一是为内部 absolute 子元素提供最近的“已定位祖先”（即 relative/absolute/fixed/sticky），二是让自身能用 top/right/bottom/left 偏移——但偏移后仍占原位置空间。常见错误是：给一个普通块级元素加 relative 却不设偏移，以为“没用”，其实它已在悄悄承担锚点职责；更典型的是忘记给父容器加 relative，导致子元素 absolute 直接相对于 body 定位，一滚动就跑偏。
- 想让某个子元素相对于它的直接父容器定位？先确保父容器有
position: relative（哪怕不偏移） -
relative的top: 20px是“视觉上往下移20px”，但原来的位置空着，不影响其他元素布局 - 不要为了“看起来居中”而滥用
relative + left: 50%，该用margin或flex的地方别硬套定位
absolute 脱离文档流，但“找谁算坐标”必须明确
absolute 元素完全脱离文档流，不占空间，它的 top/left 等值是相对于最近的已定位祖先元素（非 static）。如果所有祖先都是 static（默认值），它就相对于初始包含块（通常是视口，类似 fixed 但会随滚动移动）。新手常犯的错是：没检查祖先链，以为“父子关系=定位关系”，结果 absolute 子元素飞到页面左上角；或者误以为 absolute 可以靠父容器 width/height 自动撑开，其实它对父容器尺寸毫无影响，父容器可能因此高度塌陷。
- 检查父级、祖父级直到
html，看哪个最先不是static—— 那就是它的定位参考 - 若希望绝对定位元素随父容器宽高变化（比如全屏遮罩），父容器需显式设置
width和height，或用min-height: 100vh等兜底 - 避免在无宽度限制的
inline元素内放absolute子元素，容易定位错乱
fixed 看似简单，但“脱离视口”的本质常被忽略
fixed 永远相对于视口（viewport）定位，不随页面滚动而移动。问题常出在两点：一是没意识到它完全脱离文档流和祖先定位上下文，哪怕包在 relative 容器里也无效；二是忽略移动端兼容性——iOS Safari 早期版本对 fixed 支持不稳定，且 input 聚焦时键盘弹出会触发视口缩放，导致 fixed 元素错位。
立即学习“前端免费学习笔记（深入）”；
- 导航栏、返回顶部按钮适合用
fixed，但记得预留padding-top或margin-top给正文腾出空间，否则内容会被遮挡 - 不要试图用
fixed实现“相对某区域固定”，那是sticky的职责 - 在
transform或iframe内使用fixed时要格外小心，某些组合会触发新的包含块
sticky 是“相对+固定”的混合体，触发条件很具体
sticky 表现为：在滚动到某临界点前像 relative，到达阈值后像 fixed。但它有两个硬性前提：必须声明 top（或 bottom）、且其父容器不能有 overflow: hidden|auto|scroll（否则无法触发粘性行为）。新手常写 position: sticky 却没设 top，或把 sticky 元素放在 overflow-y: auto 的卡片里，结果完全不生效。
- 必须写
top: 0（或top: 10px等具体值），只写position: sticky不会起作用 - 检查 sticky 元素的所有祖先，确保没有
overflow非visible的容器（visible是默认值，一般不用显式写） - sticky 对
table元素支持有限，尽量用在div或语义化块级标签中
定位不是万能胶，也不是越“绝对”越好。真正管用的，是清楚每个值在什么条件下生效、参考谁、影响谁。把 relative 当锚点、absolute 当精确定点、fixed 当全局钉住、sticky 当滚动开关——逻辑理顺了，代码反而更轻、更稳。
