根本原因是元素未定位：负margin不激活z-index，必须加position: relative/absolute等才能使z-index生效；若父容器有transform、opacity<1等属性，还会创建层叠上下文锁定子元素层级。
负margin后元素被盖住，z-index没反应？
根本原因不是z-index写错了，而是该元素没变成“定位元素”。margin-top: -10px只挪位置，不改层叠顺序；浏览器仍按静态流排布，z-index直接被忽略（不报错，但无效）。
必须加position: relative（或absolute/fixed），才能激活z-index。否则哪怕DevTools里显示计算值正确，渲染层也压根没生成。
-
div { margin-top: -20px; z-index: 10; }→ 白写，z-index被丢弃 -
div { margin-top: -20px; position: relative; z-index: 10; }→ 生效，但注意父级是否创建了新层叠上下文 - 如果父容器有
transform、opacity: 0.99、filter等，会锁死子元素z-index的作用范围
父容器触发了层叠上下文，子元素z-index失效
常见于用transform: translateY(0)或filter: blur(0)做兼容性 hack 的场景——这些属性会隐式创建新的层叠上下文，导致子元素的z-index只在父容器内部有效，无法越过父级影响外部兄弟元素。
调试时打开 Chrome DevTools → 右键元素 → “Show stacking context”，一眼就能看到哪一层开始隔离。
立即学习“前端免费学习笔记（深入）”；
- 避免在父容器上滥用
transform、opacity < 1，除非真需要视觉效果 - 若必须用，把需要提层的子元素提到更高层级的 DOM 位置，或让它的父容器也设
position: relative并配合理想z-index - 别依赖 Tailwind 的
z-50这种绝对值；多层嵌套中，z-20父容器可能压过z-50子组件
边框重合变粗 + hover遮挡，怎么同时解决？
横向列表用margin-left: -1px压掉相邻边框是经典做法，但:hover时右边框被后一个元素盖住，本质是层叠顺序没同步更新。
不能只加z-index，得确保:hover状态下的元素获得独立定位上下文，并高于相邻兄弟。
- 给列表项加
position: relative（默认就有，不用重复） -
:hover时加z-index: 2（比默认的z-index: 1高） - 避免用
position: absolute，它会脱离文档流，破坏列表结构 - 移动端 Safari 对
margin-left: -1px支持不稳，可加媒体查询补-2px
比负margin更稳的替代方案有哪些？
很多遮挡问题其实源于强行用margin做位移，而没理清布局模型。与其反复调z-index，不如换种方式达成相同视觉效果。
transform: translateY(-10px)比margin-top: -10px更可控：它不改变文档流占位，天然触发合成层，层级关系更清晰，且不会引发外边距合并或滚动偏移。
- 对图片/文字重叠场景，优先用
transform代替margin - 需要裁剪边缘时，
clip-path: inset(0 0 0 1px)比靠负边距“抠”更稳定 - 固定导航栏遮挡内容？用
body { padding-top: 60px; }，而非推主内容区域
z-index，却忘了检查父容器有没有悄悄用transform把自己关进了一个小黑屋。 
