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 当滚动开关——逻辑理顺了，代码反而更轻、更稳。