父容器必须设 position: relative，因为 absolute 元素会向上查找最近已定位祖先，若无则锚定 html，导致跨浏览器错位；显式设 relative 可锁定参考系且兼容 ie6。
为什么父容器必须设 position: relative
错位常不是子元素写错了，而是它没找到预期的定位参考点。position: absolute 会向上找最近的「已定位祖先」，如果所有父级都是 position: static（默认值），它就直接锚定到 ，而不同浏览器对初始包含块的解析存在细微差异——尤其在缩放或嵌套 iframe 场景下。
显式给直接包裹它的父容器加 position: relative，能强制锁定参考系，且不改变布局流，兼容性好到 IE6 都能跑。
- 别只靠视觉判断：用 DevTools 的「Computed」面板看「Offset Parent」，确认是不是你写的那个父元素
- 避免间接设置：不要依赖某个中间组件的 class 间接带出
relative，直接在 HTML 结构对应的父容器上声明 - 慎用
position: absolute套娃：多层 absolute 容易让 offset 累计误差放大，优先用一层relative+transform微调
fixed 元素在 Safari 和 Chrome 表现不一致怎么办
这不是 bug，是规范执行差异：position: fixed 理论上应相对视口，但 Safari（尤其 iOS）和旧版 Firefox 在祖先有 transform、filter 或 perspective 时，会创建新包含块，导致 top/left 计算起点偏移。
快速验证：临时删掉所有祖先的 transform: translateZ(0)、filter: opacity(0.99) 等，看是否恢复一致。
- 优先用
position: sticky替代，它更可控，且现代浏览器支持良好（Safari 15.4+ 已修复大部分问题） - 若必须用
fixed，确保其父级无任何触发 containing block 的属性；实在绕不开，就用@supports分离样式 - 移动端 iOS Safari 中，地址栏收起会导致视口高度突变，
fixed元素不会重绘——此时改用inset+position: absolute并配合visualViewportAPI 动态修正
用 inset 替代 top/left 能解决哪些错位
inset 是 top/right/bottom/left 的语义化简写，但它不依赖百分比冻结行为，直接锚定当前视口边缘，缩放时数值逻辑更干净。
比如 inset: 0 等价于 top: 0; right: 0; bottom: 0; left: 0，但混用 inset: 0; left: 50% 会导致 left 覆盖 inset 的左值，行为不可控。
- 仅在
position: fixed或absolute下生效，relative也支持（这点常被忽略） - 兼容性需兜底：Chrome 103+、Firefox 102+、Safari 16.4+ 原生支持；旧版本可用 PostCSS 插件自动展开
- 不要和
vw/vh混搭calc()，例如inset: calc(20vh - 10px) 0 0 0，其中10px部分仍会跳
为什么 z-index 明明写了却不管用
z-index 只对已定位元素有效，但更隐蔽的问题是层叠上下文嵌套。只要父元素设置了 opacity（非 1）、transform、filter 或 will-change，就会创建新 stacking context，子元素的 z-index 就被锁死在这个上下文里，再大也压不过同级其他上下文里的元素。
调试时别只盯着目标元素的 z-index 值，先看它的父级有没有意外触发层叠上下文——Chrome DevTools 的「Layers」面板能直观显示层级树。
- 避免全局堆叠值：用小范围区间管理，比如导航栏
z-index: 10、弹窗20、tooltip30 - 不要给
position: static元素设z-index，浏览器直接忽略，连 warning 都不报 - 移动端 Safari 中，
position: fixed元素可能被系统 UI（如地址栏、键盘）强行打断层叠顺序，此时只能靠transform: translateZ(0)强制提升，但要小心触发新包含块
真正容易被忽略的是：错位往往不是单一 CSS 属性的问题，而是 transform 创建包含块 + 父容器未设 relative + z-index 被嵌套上下文截断，三者叠加才让问题在特定浏览器里爆发。排查时得一层层剥开，不能只改一个地方就以为修好了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
