HTML页面布局中zindex层级混乱怎么排查-html教程-PHP中文网

z-index不生效的首要原因是元素未定位（position仍为static），必须设为relative/absolute/fixed/sticky才激活；其次，父级若触发层叠上下文（如opacity

html页面布局中zindex层级混乱怎么排查

z-index不生效，先看元素有没有定位

写了z-index: 999却没用？大概率是position还是static——这是最常被忽略的硬性前提。浏览器直接无视z-index声明，元素照旧按 DOM 顺序渲染。

检查方式：DevTools →「Computed」面板搜索position，确认值不是static；再搜z-index，看是否显示为具体数字（而非auto）。

Flex/Grid 子项即使视觉上“浮动”，也必须显式加position: relative才能启用z-index
Vue/React 中动态插入的按钮，JS 注入样式后可能覆盖了你写的position，需检查最终生效样式
常见误操作：.btn { z-index: 10; } → 漏掉position: relative，完全无效

被遮挡不是数值小，而是层叠上下文断了

两个元素z-index分别是 999 和 1，但 1 的还是盖在上面？说明它们根本不在同一个“比较场”里——父容器悄悄创建了新的层叠上下文，把子元素锁死在局部。

触发新层叠上下文的属性包括：opacity小于 1（哪怕opacity: 0.99）、transform非none（含translateZ(0)）、filter、will-change、isolation: isolate，以及position + z-index组合（哪怕z-index: 0）。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

DevTools → 选中目标元素 →「Computed」面板搜stacking context，标为“Yes”就确认被隔离
逐级向上点开父节点，重点查opacity、transform、filter是否意外存在
iOS Safari 对transform和will-change极其敏感，真机测试才可靠，模拟器常漏问题

Tailwind 中 z-xxx 类不生效的配置陷阱

配了z-999却没生成 CSS？Tailwind v3+ 已废弃数组写法，且extend.zIndex不生效——必须完整定义theme.zIndex对象。

正确写法示例：

module.exports = {
  theme: {
    zIndex: {
      'background': '0',
      'modal-overlay': '60',
      'modal-content': '70',
      'tooltip': '40',
      'toast': '50',
    }
  }
}