z-index不生效的主因是父容器创建了新的层叠上下文，此时子元素z-index仅在该上下文中生效；需检查祖先元素的position与z-index、opacity等隐式触发属性，并确保目标元素已设position非static。
z-index 不生效？先确认父容器是否创建了新的层叠上下文
很多情况下 z-index 看似没反应，不是写错了，而是它根本“不起作用”——因为目标元素的某个祖先（比如 position: relative 且设置了 z-index 的父级）已经创建了新的层叠上下文。这时子元素的 z-index 只在该上下文内比较，跟兄弟容器完全无关。
- 检查所有祖先元素：是否有
position值为relative、absolute、fixed或sticky，同时设置了z-index（哪怕值是0或auto） - 如果父容器确实创建了层叠上下文，想让子元素“穿透”出去，只能把该子元素提到更高层级的 DOM 位置（比如挂到
body下），或移除父级的z-index -
opacity、transform、filter、will-change等属性也会隐式创建层叠上下文，容易被忽略
负 margin 能拉元素重叠，但别指望它改变层叠顺序
margin-top: -20px 这类写法确实能让元素视觉上压在另一个元素上面，但它只是“挪位置”，不参与层叠排序。两个元素谁在上、谁在下，最终还是由 z-index 和层叠上下文决定。
- 负 margin 是布局手段，不是层叠控制手段；用它制造重叠后，若未显式设置
z-index，浏览器按 HTML 流顺序渲染：后出现的元素默认盖在前面的上面（前提是同层叠上下文） - 常见翻车场景：给 A 元素加
margin-top: -30px让它盖住 B，结果 B 有z-index: 1，A 却没设，此时 B 依然在上 - 如果只是为了微调对齐或遮挡边缘，负 margin +
background配合往往比硬调z-index更轻量、更可控
同时用 z-index 和负 margin 时，优先级关系很明确
两者分工清晰：margin 决定“在哪”，z-index 决定“谁在上”。但要注意它们生效的前提条件是否满足。
- 必须给元素设置
position（relative、absolute、fixed三者之一），z-index才会生效；static元素无视z-index - 负 margin 对
position: static元素也有效，但此时它无法和z-index配合——因为后者压根不工作 - 示例：要让按钮浮在卡片右上角并盖住边框，得这样写：
.card { position: relative; }<br>.btn { position: absolute; top: -8px; right: -8px; z-index: 2; }而不是只靠margin-right: -8px把按钮挤出去
移动端或 flex/grid 容器里，负 margin 表现可能不一致
在现代布局中，margin（包括负值）的行为受容器 display 类型影响。Flex 容器里负 margin 仍可位移元素，但可能触发额外的对齐逻辑；Grid 中则基本被忽略（除非用 place-self 或 justify-self 显式定位）。
- Flex 容器中，子项的负 margin 会影响自身尺寸计算，也可能导致父容器溢出或滚动条意外出现
- Grid 容器中，直接对 grid item 设
margin通常无效；想重叠，应改用grid-row/grid-column跨区域，或配合z-index控制层叠 - 某些 iOS Safari 版本对负 margin 的渲染有轻微偏移，若要求像素级精准，建议用
transform: translate()替代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
