重叠问题根源在于定位基准、层叠上下文与单位选择未对齐；z-index仅是最后一步，需先排查position值、隐式层叠上下文、inset替代px缩放偏移、sticky背景不透明及grid替代绝对定位等核心方案。
重叠不是“该不该盖住”的问题，而是定位基准、层叠上下文和单位选择三者没对齐——z-index只是最后一步，不是万能开关。
z-index 不生效？先查 position 和层叠上下文
两个 position: absolute 元素明明写了 z-index: 10 和 z-index: 1，但小的还是盖在大的上面，大概率是以下情况之一：
- 其中一个元素实际
position是static（被重置样式、CSS-in-JS 或默认值覆盖），z-index直接被忽略 - 高
z-index元素的父容器设置了transform、opacity: 0.99或will-change: transform，隐式创建了新层叠上下文，它的z-index只在内部有效，跨不出去 - 两个元素不在同一层叠上下文中：比如一个在
body下，另一个在某个z-index: 0的div里，后者整个子树层级被锁死
用 Chrome DevTools 的 «Computed» 面板确认每个元素的 position 实际值；再切到 «Layers» 面板搜 “stacking context”，标为 Yes 的节点就是“结界”源头。
缩放时重叠？别碰 top/left，改用 inset + rem
浏览器缩放（Ctrl+/Cmd+）后定位元素挤在一起，不是 z-index 没设够，而是 top: 20px 这类像素值被锁定在初始视口坐标系里，缩放后数值不变，但渲染逻辑变了——视觉上就“塌”了。
- 用
inset替代传统四偏移：inset: 1rem auto auto 1rem比top: 16px; left: 16px更稳定，它锚定到当前视口边缘，不依赖快照 - 避免混用：
inset: 0; left: 50%会导致left覆盖inset的左值，行为不可控 -
transform: translate(10px, 10px)同样失效——缩放后 10px 物理像素变多，但元素自身也放大，相对位移失衡；改用margin-top: -0.125rem或padding-top: clamp(0.25rem, 1vw, 0.5rem)
兼容性需兜底：@supports not (inset: 0) 包裹旧写法，Chrome 103+、Firefox 102+、Safari 16.4+ 支持 inset。
sticky 元素“透出文字”？不是定位错，是背景漏了
滚动时 position: sticky 元素和下方内容看起来重叠，大概率不是 top 值或 z-index 问题，而是半透明背景没封住下层文字。
- 检查
background-color是否含 alpha 通道（如rgba(255,255,255,0.9)）；opacity 同样会触发透出 - 必须同时给 sticky 元素及其**紧邻的下一个同级块级元素**（比如
#main-content）设置不透明背景，不能只靠父容器继承 - iOS Safari 渲染更激进，可加
backface-visibility: hidden强制合成层，或在外层包个position: relative容器来隔离
真机反复滚动并暂停，观察边缘是否有 1px 灰边或文字残影——有则说明背景未完全覆盖。
父容器被绝对定位元素撑不开？优先换 Grid，别硬算高度
父元素 height: auto，但里面全是 position: absolute 子项，结果父容器高度塌陷，后续内容往上顶，造成视觉重叠。这不是 bug，是绝对定位本意：脱离文档流，不参与尺寸计算。
- 不要用 JS 反复调用
getBoundingClientRect()计算子项位置再设父容器height——性能差、易漏帧、缩放/字体变化时失效 - 绝大多数“必须绝对定位”的场景，Grid 都能替代：
grid-row/grid-column精确定位，支持z-index，且天然撑开父容器 - 例如把
position: absolute; top: 20px; left: 30px换成grid-row: 1; grid-column: 2;，配合grid-template-rows和grid-template-columns控制轨道
真正难的不是写对某一行 CSS，而是判断这个重叠到底是定位失控、背景缺失、层叠隔离，还是布局模型用错了——得先分清问题类型，再动刀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
