CSS定位常见误区有四：1. relative是相对自身原位置偏移，非父元素；2. absolute使子元素脱离文档流，易致父容器高度塌陷；3. z-index仅对已定位元素生效，且受层叠上下文限制；4. fixed参照视口内边界，其位置会随视口动态变化。
很多人学CSS定位时，不是卡在“不会用”，而是掉进一些看似合理、实则错误的理解里。这些误区往往藏在教程的边角、文档的默认值或浏览器的隐式行为中，不踩一次很难意识到。
relative定位≠相对父元素定位
这是最常被误解的一点。relative 的“相对”是指相对于自身原本在文档流中的位置偏移，而不是父容器。即使父元素设置了 position: relative，子元素用 position: relative 也不会因此“以父元素为参考系”。它只是在原地挪动，仍占据原来的空间。
- 想让子元素相对于父元素定位，父元素需设 position: relative（或其他非 static），子元素设 position: absolute
- relative 元素的 top/left 偏移后，原位置依然保留（不影响后续元素布局）
- 如果父元素没设 position，absolute 子元素会一直向上找，直到找到最近的已定位祖先，否则就相对于初始包含块（通常是视口）
absolute元素脱离文档流，但父容器高度可能塌陷
当子元素用了 absolute，它就从文档流中完全抽离——父元素不再“感知”它的存在。如果父容器除了这个 absolute 子元素外没有其他内容或高度设置，它的高度就会变成 0。
- 常见表现：父容器背景色看不见、border 不显示、下方元素紧贴上方内容
- 解决方法不是给父容器写死 height，而是确保它有参与构建高度的内容（如普通块级子元素），或用伪元素清除、min-height 等方式兜底
- 如果必须用 absolute 且要撑高父容器，考虑配合 JS 测量，或改用 flex/grid 布局替代
z-index 只对“已定位元素”生效
很多新手给一个 div 写 z-index: 999 却发现叠层没变化，原因往往是它没设 position（默认是 static）。z-index 对 position: static 的元素完全无效。
立即学习“前端免费学习笔记（深入）”；
- 哪怕只写 position: relative（不加 top/left），z-index 就立刻起作用
- z-index 的层级比较是在同一“层叠上下文”内进行的；父元素设了 position + z-index 后，可能创建新的层叠上下文，导致子元素的 z-index 只在内部比大小
- 避免无意义地全局狂堆 z-index: 999999，优先理清结构和层叠上下文关系
fixed 定位的参照物不是视口边缘，而是“视口”本身
fixed 元素确实固定在视口上，但它计算 top/right/bottom/left 的起点，是视口的内边距边界（即不包括滚动条宽度、地址栏等）。在移动端或某些浏览器中，页面缩放、横竖屏切换、地址栏显隐都可能影响 fixed 元素的实际位置。
- 例如 iOS Safari 中，滚动时地址栏收起/展开，会导致 fixed 元素“跳动”
- 不要假设 fixed 元素永远严丝合缝贴着屏幕顶部——它贴的是“当前视口”的顶部，而视口尺寸可能动态变化
- 需要稳定吸附效果时，可考虑用 position: sticky 替代，或结合 JS 监听 resize/scroll 事件微调
