相对定位元素默认不覆盖其他元素，因未激活z-index；仅设position: relative仅获偏移能力，不提升z轴层级，需同时设置z-index才生效。
相对定位元素默认不覆盖其他元素，因为没激活z-index
设置 position: relative 本身只是让元素获得“可偏移”的能力，并不会自动提升它在Z轴上的层级。浏览器仍按默认堆叠顺序渲染：普通流元素、浮动元素、定位但未设 z-index 的元素（按HTML顺序后出现者在上），最后才是设置了 z-index 的定位元素。所以光写 position: relative，它大概率会被后面出现的定位元素或某些视觉效果（如 opacity: 0.99）生成的层叠上下文盖住。
- 必须同时设置
position: relative和z-index（如z-index: 10）才真正生效 -
z-index对position: Static元素完全无效，写了也白写 - 不要只靠“写得晚”来赌覆盖顺序——HTML顺序不可靠，尤其跨组件/框架时
z-index 失效？先查是不是掉进了不同层叠上下文
即使你给 .overlay 设置了 z-index: 999，它仍可能被 .sidebar（z-index: 1）盖住——不是你的值不够高，而是它们根本不在同一个“比大小”的世界里。只要父级触发了层叠上下文，子元素的 z-index 就只在那个小圈子里有效。
- 常见“隐形陷阱”父级样式：
opacity: 0.99、transform: scale(1)、Filter: blur(0)、will-change: transform - 用 chrome 开发者工具右键元素 → “Show layers”，看是否被标为
stacking context - 临时删掉可疑父级的
opacity或transform，观察覆盖是否恢复
绝对定位覆盖层显示不出来？大概率是父容器没设 relative
这是图片悬停遮罩、弹窗、图标叠加等场景的高频问题。比如你想让 .overlay 盖在图片上，但写了 position: absolute 却没效果——不是 z-index 的锅，而是它压根没找到定位参照物。
-
position: absolute必须相对于最近的“已定位祖先”（position值不为static）定位 - 如果父容器（如
.container-main）没设position: relative，.overlay就会往上一直找，最终相对于定位，位置完全失控 - 正确做法：把
position: relative加在直接包裹图片和遮罩的父容器上，再给遮罩加top: 0; left: 0;
浮动元素挡住定位层？别硬刚z-index，先理清谁跟谁比
浮动元素（Float: left）本身不支持 z-index，但它所在的父容器一旦被设了 position + z-index，就可能创建独立层叠上下文，导致和你的定位弹层“不在一个维度比高低”。
立即学习“前端免费学习笔记（深入）”；
- 不要给浮动元素自己加
z-index（无效）；要调就调它的父容器 - 更稳妥的做法：把浮动区域和定位层都放进同一个
position: relative父容器下，再各自设z-index - 长期方案：用
display: flex或display: grid替代float，彻底避开文档流脱离带来的层叠混乱
层叠问题从来不是“加个 z-index 就完事”，而是搞清楚“谁在哪个上下文里、跟谁比、凭什么赢”。浏览器不会骗人，它只是严格按规范执行——你看到的“意外覆盖”，几乎全是层叠上下文边界没对齐的结果。