为什么Tailwind CSS的z-index配置不生效_通过层叠上下文及position属性排查-css教程-PHP中文网

z-index类名无效首要原因是元素未定位，必须显式设置position: relative/absolute/fixed/sticky；其次需排查祖先元素是否因opacity

为什么tailwind css的z-index配置不生效_通过层叠上下文及position属性排查

z-index类名写了却没反应，先查position是否生效

Tailwind的z-50、z-100这类类名，只对已定位元素起作用。如果元素仍是position: static（默认值），浏览器直接忽略z-index声明——不是“效果弱”，是压根不读。

常见误操作包括：

只加z-50，漏掉relative或其它定位类
在 Flex/Grid 容器里给子项加z-50，误以为布局模式能替代定位
用 JS 动态切换 class 时，只更新 z 类，没同步补上relative

快速验证：打开开发者工具 → 选中元素 → 在「Computed」面板搜position，若值为static，那就不用往下看了，先加relative再说。

父容器悄悄创建了层叠上下文，子元素z-index被锁死

即使你给子元素写了absolute和z-999，只要它任意一个祖先元素满足以下任一条件，就会创建独立的层叠上下文（stacking context），把子元素的z-index关进“小盒子”里：

opacity小于 1（比如opacity-99）
transform非none（哪怕只是translateZ(0)或scale(1)）
filter、will-change、isolation: isolate、backdrop-filter

此时子元素的z-999只能跟同个父容器下的兄弟比高低，盖不过隔壁z-1的弹窗——因为它们不在同一个上下文里。

排查技巧：

在「Computed」面板里搜stacking context，标为Yes即中招
临时注释掉父级可疑样式（如opacity-99、transform），看遮挡是否消失
必须保留动效？那就别只调子元素，改用z-[value]提升父容器本身，或把目标元素用 JS 移到document.body下 + fixed手动定位

tailwind.config.js里zIndex配置写错位置或格式

Tailwind v3.0+ 的zIndex必须明确定义在theme.zIndex对象里，数组写法、放错层级、键名不加引号，都会导致 CSS 规则根本没生成。

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

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

下载

正确写法示例：

module.exports = {
  theme: {
    zIndex: {
      'background': '0',
      'dropdown': '30',
      'tooltip': '40',
      'modal': '50',
      'max': '2147483647'
    }
  }
}

错误写法包括：