css定位本质是坐标系统切换，需综合考虑文档流、包含块、层叠上下文及祖先属性影响；用错上下文则定位失效。
CSS定位不是“选一个属性就完事”的事，它本质是元素在文档流中的坐标系统切换——用错上下文，position再熟也白搭。
为什么position: relative改了top却没动？
因为relative不脱离文档流，位移后原占位还在，其他元素照常布局；你看到“没动”，其实是被后面元素盖住了，或父容器没设overflow: visible裁掉了溢出部分。
- 调试时先加
outline: 1px solid red确认元素真实位置 - 若父容器有
transform、will-change或filter，会创建新的层叠上下文，z-index可能失效 -
top/right等偏移值对static元素无效，别在没设position的元素上写这些
position: absolute到底相对谁定位？
它往上找第一个position值为relative、absolute、fixed或sticky的祖先元素；找不到就相对于初始包含块（通常是视口），不是父元素。
- 常见坑：父容器只写了
display: flex，但没设position: relative，子元素absolute直接飞到视口左上角 -
inset（如inset: 0）可替代top/right/bottom/left: 0，更简洁，但IE全系不支持 - 若祖先用了
transform，哪怕只是transform: translateZ(0)，也会触发其成为包含块——这点连很多资深前端都忽略
position: fixed在iOS Safari里失灵怎么办？
它本该相对于视口，但在iOS Safari中，如果父容器有transform、perspective或filter，fixed会降级为相对该容器定位。
立即学习“前端免费学习笔记（深入）”；
- 检查是否无意中给
html或body加了transform（比如某些动画库默认注入） - 滚动容器若用了
overflow: scroll且带-webkit-overflow-scrolling: touch，fixed在内部可能表现异常 - 替代方案：用
position: sticky+top: 0模拟固定效果，兼容性更好，且天然适配滚动边界
为什么z-index有时完全不生效？
它只在同一个层叠上下文中起作用。两个div即使z-index差1000，只要属于不同层叠上下文（比如一个在transform容器内，另一个没有），就无法直接比较层级。
- 每个
position非static+z-index非auto的元素，或带transform/opacity等属性的元素，都会创建新层叠上下文 - 不要迷信大数字：
z-index: 9999在父层叠上下文z-index: 1里，依然压不过兄弟上下文中z-index: 2的元素 - 调试建议：用浏览器开发者工具的“Layers”面板（Chrome）或“3D View”（Firefox）直观查看层叠结构
定位真正难的不是记属性，而是时刻意识到：每个元素的位置和层级，都是由它自身、父级、祖先级甚至兄弟级的多个CSS声明共同协商出来的。漏掉其中一环，视觉结果就可能完全偏离预期。