z-index不生效主因是元素未参与层叠上下文；需确保position为relative/absolute/fixed/sticky，且注意父容器opacity/transform/filter等会创建新上下文。
z-index不生效？先确认元素是否参与层叠上下文
写了 z-index: 999 却还是被盖住，大概率不是值不够大，而是元素压根没进入层叠上下文。z-index 只对 position 为 relative、absolute、fixed 或 sticky 的元素生效；static（默认值）完全无视它。
常见陷阱包括：
- 父容器用了
opacity、transform、filter（比如filter: drop-shadow()），会悄悄创建新层叠上下文，子元素的z-index就变成“局部有效” - 两个同级元素都设了
position: relative，但都没显式写z-index，则按 HTML 源顺序堆叠：后写的盖在先写的上面 - 移动端 Safari 对
z-index+ 负 margin 组合支持较弱，可临时加transform: translateZ(0)强制创建上下文
负margin和z-index是两件事，别指望它们自动耦合
margin-top: -20px 只控制“画在哪”，z-index: 1 才决定“谁在上”。二者不绑定，也不互相推导。
典型翻车场景：
- A 元素加了
margin-top: -30px盖住 B，但 A 没设z-index，而 B 有z-index: 1→ B 仍在上层 - 卡片列表中每个卡片都设
position: relative，但只给最后一个加z-index: 2，结果它反而被前面没设值的卡片压住（因为未设值的z-index是auto，默认层级低于显式设值者） - 想让弹层浮在所有卡片上，但卡片容器加了
filter: drop-shadow()→ 弹层的z-index是相对于该容器计算的，再大也出不来
Flex/Grid里用负margin重叠，z-index要更谨慎
Flex 和 Grid 容器本身不创建层叠上下文，但子项若设了 position，其 z-index 仍需满足前提条件才能生效。
实操要点：
- 必须给需要分层的子项显式设
position: relative（或absolute）+z-index，哪怕只是z-index: 1 - Flex 容器若设了
justify-content: center，负margin-left可能只在初始渲染时闪一下，随后被居中逻辑覆盖 → 改用transform: translateX(-20px)更稳定 - Grid 中负
margin基本无效（除非配合place-self或justify-self），推荐直接用grid-row/grid-column重叠 +z-index控层 - 父容器设了
gap，子项的负margin无法越过gap区域去重叠，得先关掉gap或改用transform
重叠失效的常见视觉干扰源
负 margin 本身能让元素“画错位置”，但实际看不到重叠，往往卡在这些地方：
-
overflow: hidden或overflow: auto的父容器会直接裁掉溢出部分 → 检查 computed 样式中overflow是否为visible - 外边距合并（margin collapse）吞掉了负值：相邻块级元素的
margin-bottom: -15px和margin-top: 20px合并后只剩5px→ 用padding: 0.1px或border打断 collapse - 父容器没触发 BFC，导致高度塌陷，子元素负偏移后内容被裁切 → 改用
display: flow-root（比overflow: hidden语义更干净） - 过大的负值（如
margin-left: -200px）在 Chrome 115+ 会触发警告，且可能让元素脱离可访问区域，影响键盘焦点和屏幕阅读器
负 margin 制造的重叠始终是“视觉错位”，不是结构重组；真正控制谁盖谁的，永远是层叠上下文 + z-index 的组合。最容易被忽略的是：两个本该分层的元素，可能一个在父容器创建的新上下文中，另一个在全局上下文中——它们根本不在同一套排序体系里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
