z-index失效主因是元素position为static未参与层叠计算，或被祖先创建的层叠上下文隔离；需确认position非static，并排查opacity

z-index 失效，几乎从不因为数值写小了，而是元素根本没参与层叠计算，或被锁死在某个祖先创建的独立层叠上下文里。

元素 position 是 static，z-index 直接被浏览器忽略

只要 position 是 static（默认值），z-index 就是无效语法——浏览器连解析都不会解析它，更不会报错或警告。

• 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜 position，确认最终值不是 static
• 临时加一行 position: relative（不影响文档流），立刻验证 z-index 是否生效
• JS 动态插入弹窗、tooltip 时，常只设 z-index，漏掉同步设置 position: fixed 或 absolute
• Vue/React 中 class 切换后，定位属性可能被其他样式规则重置为 initial 或 unset

父级元素静默创建了 stacking context，子元素 z-index 被“关进盒子”

一旦某个祖先元素满足以下任一条件，它就创建了新的层叠上下文（stacking context）——子元素的 z-index 只能在该盒子内部比大小，无法和外部同级元素竞争。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 常见触发属性：opacity opacity: 0.999）、transform ≠ none（包括 translateZ(0)、scale(1)）、filter ≠ none（哪怕 blur(0)）、will-change: transform、isolation: isolate
• 在 DevTools Elements 面板中逐级点击父节点，右侧面板 «Layout» 标签页下看 «Stacking context» 是否突然变成 Yes
• 临时注释掉可疑父级的 transform 或 opacity，遮挡是否立刻消失？是 → 就是它
• z-index: 0 和 z-index: auto 行为不同：前者会强制创建新上下文，后者不会（前提是元素已定位）

Tailwind CSS 中 zIndex 配置不生效，常因格式或热更新问题

Tailwind v3.0+ 已废弃数组写法，zIndex 必须完整定义在 theme.zIndex 下，且键名必须加引号、值必须是字符串。错一个字符，CSS 规则就不会生成。

• 错误写法：extend: { zIndex: { 'modal': '50' } } —— theme.zIndex 默认为空，追加无效
• 错误写法：modal: 50（数字）或 modal（未加引号），JS 解析失败或截断
• 改完 tailwind.config.js 后没重启开发服务器 —— Tailwind 不热重载配置变更
• 正确示例：

  theme: {
    extend: {
      zIndex: {
        'modal': '60',
        'dropdown': '50'
      }
    }
  }

移动端和响应式断点中 z-index 突然失效

响应式布局里最隐蔽的问题是：媒体查询中激活的 transform、opacity 或 filter 静默创建了新层叠上下文，而你根本没意识到它只在某个断点里生效。

• iOS Safari 对 html 或 body 上的 transform: translateZ(0) 极其敏感，整页变成单一层叠上下文，“最高”的弹窗也只能在里面排第一
• 断点中从 display: block 切换为 flex 或 grid 时，若父容器同时有 opacity: 0.99，整个子项组就被隔离了
• 媒体查询中改了 position（如 desktop static → mobile fixed），却漏掉同步补 z-index，结果元素浮起但落在默认层（第二层）
• 用 getComputedStyle(el).getPropertyValue('z-index') 在控制台验证断点生效后的实际值，注意 auto 和 0 的语义差异

真正难的不是堆数字，而是每次写 z-index: 9999 前，先往上点三下 DevTools，找到那个突然标红的 «Stacking context: Yes» —— 那才是你该修的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！