掌握CSS定位关键在于理解四种模式的行为逻辑：static不脱离文档流；relative占位且偏移基于自身；absolute脱离流并参照最近已定位祖先；fixed脱离流且相对视口固定；sticky是两者的结合体。
掌握CSS定位是前端开发的关键一步，它直接影响页面布局的灵活性和响应性。不需要死记硬背所有属性，关键是理解每种定位机制的行为逻辑，再通过典型场景反复练习。
理解四种定位模式的本质区别
static、relative、absolute、fixed 不是并列关系，而是有层级和触发条件的。重点不是“怎么写”，而是“写了之后元素脱离谁、参照谁、是否占位”：
- static：默认值，不脱离文档流，top/left等偏移无效
- relative：仍在文档流中占位，偏移基于自身原始位置，不影响其他元素布局
- absolute：完全脱离文档流，参照最近的已定位祖先（position ≠ static），没有就参照初始包含块（通常是视口）
- fixed：脱离文档流，参照视口固定，滚动不跟随
掌握“定位上下文”的实际判断方法
很多人写不出想要的效果，问题常出在没搞清 absolute 的参照对象。记住两个实操要点：
- 用浏览器开发者工具检查父级元素的 position 值，只要不是 static，就可能成为定位上下文
- 如果希望子元素相对于某个容器定位，就给该容器显式设置 position: relative（哪怕不需要偏移）
- sticky 是 relative 和 fixed 的结合体，触发条件依赖滚动位置和容器边界，需配合 top/left + 父容器有高度/滚动才生效
从经典小案例开始动手练
不要一上来就做复杂导航或弹窗，先用几个5行以内的例子建立直觉：
立即学习“前端免费学习笔记（深入）”；
- 右上角关闭按钮（absolute + top: 8px; right: 8px; 父容器 relative）
- 下拉菜单浮层（子菜单 absolute，菜单项 relative，hover 触发显示）
- 回到顶部按钮（fixed + bottom/right，加 transition 平滑出现）
- 卡片内徽章角标（absolute + top: -6px; right: -6px; transform: translate(50%, -50%) 居中修正）
进阶：组合定位与常见陷阱
真实项目中往往多种定位混用，注意这些高频坑点：
- absolute 元素设了 width: 100%，结果宽度只占“定位上下文”的宽度，不是整个页面
- z-index 只对已定位元素（position ≠ static）有效，且层级比较只在同一个 stacking context 内进行
- transform 会创建新的 stacking context，可能意外改变 z-index 层级关系
- 移动端 fixed 在部分 iOS Safari 中有兼容问题，可用 position: sticky 替代或加 -webkit- 前缀
