z-index在媒体查询中失效，主因是@media内新增的transform、opacity等属性意外创建新层叠上下文，使子元素z-index仅在内部生效；需检查position是否非static，并用DevTools验证stacking context。
响应式布局下，元素层叠关系不会自动适配屏幕尺寸——z-index 和堆叠上下文规则照常生效，但媒体查询可能意外切断或重建层叠上下文，导致“同一套代码在手机上被盖住、在桌面正常”的问题。
为什么@media里改z-index经常失效
媒体查询本身不改变堆叠上下文，但它常伴随其他属性一起修改，从而触发新上下文。比如在移动端把某个容器加了 transform: translateY(0) 或 opacity: 0.99，哪怕只是为了动画兼容，也会让该容器变成新的堆叠上下文根节点。
此时它的子元素的 z-index 只在内部比大小，再大也压不住父容器外的导航栏或弹窗遮罩。
- 检查 DevTools 的「Computed」面板，看目标元素的
position是否仍为relative（不是static），且z-index显示为具体数字 - 临时注释掉媒体查询中所有
transform、opacity、will-change相关声明，观察层级是否恢复 - 避免用
transform: translateZ(0)强制硬件加速——iOS Safari 对它极其敏感，极易创建隐式上下文
响应式卡片阶梯堆叠时z-index递增没用
阶梯效果依赖两个条件同时成立：视觉错位（靠 transform）+ 层级顺序（靠 z-index）。只写 z-index: 1 → 2 → 3，但没给每张卡片加 position: relative，那它们仍在文档流里平铺，z-index 完全被忽略。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的问题是：如果卡片容器用了 display: flex 或 grid，子项即使有 z-index，也必须显式设 position: relative 才能启用——Flex/Grid 不会自动赋予定位能力。
- 每张卡片必须单独声明
position: relative（不能只靠父容器定位） -
z-index值建议用小整数递增，如1、2、3，避免和弹窗组件冲突 - 错位统一用
transform: translateY(-6px) translateX(6px)，别用margin-top或top，否则滚动卡顿
语义化结构影响堆叠上下文边界
<main>、<section> 这类语义标签默认不创建堆叠上下文，但一旦你给它们加了 z-index（哪怕只是 z-index: 0）且 position 不是 static，它们就立刻变成上下文根节点——其内部所有子元素的 z-index 都被“锁死”在这个范围内。
典型场景：响应式导航栏用 <nav> 包裹，你在媒体查询里给它加了 position: relative; z-index: 10 来确保它浮在内容上方；结果发现侧边菜单弹出后，按钮被 <nav> 盖住了——因为菜单是 <nav> 的子元素，它的 z-index: 999 实际只跟 <nav> 内部其他元素比，根本出不去。
- 结构容器（如
<nav>、<header>）慎设z-index，优先用 DOM 顺序控制覆盖关系 - 需要跨结构覆盖时（如全局提示框），把元素挂到
<body>直接子级，绕过中间语义容器的上下文隔离 - 用
<section>时务必带标题（<h2>等），否则部分选择器（如section:has(h2)）失效，可能间接影响样式作用域
真正难调的从来不是数值大小，而是弄清当前元素嵌在哪几层堆叠上下文中——浏览器 DevTools 的「Layers」面板比「Elements」里看样式更直观，尤其在响应式断点切换时，上下文可能动态重建。
