React Material UI中z-index设置无效 如何让子Box组件显示在最顶层

问题根因 #

子Box被图片遮挡核心是层叠上下文规则不匹配，和z-index数值大小没有直接关系：

1. 你的代码里父Box和img共用了imageExpand类名，这个类大概率给img设置了定位属性+独立z-index，让img在父Box的层叠上下文中处于更高层级
2. 如果元素本身没有创建独立层叠上下文，给子元素设置再高的z-index，也没法越过同层级里层叠顺序更高的兄弟元素
3. MUI Modal默认自带z-index: 1300的层叠上下文，内部元素的z-index只会在Modal的层叠上下文范围内生效，不会溢出影响Modal外部元素

另外注意你代码里子Box的类名拼写错误：写的是conainer，少了一个t，如果你的CSS里定义的是.container，那所有给子Box写的样式根本就没挂载上，这是最容易忽略的低级问题。

可行解决方案 #

按优先级依次尝试：

方案1：显式设置同层级元素的定位和z-index（90%的情况能解决） #

z-index只对设置了非static定位的元素生效，你需要给img、子Box、关闭图标三个同层级兄弟元素，显式设置定位和匹配的z-index，不需要设到1000这么大的数值，只要保证需要浮在上面的元素z-index更高即可：

<Box  // 父Box
  sx={{
    ...style,
    width: width,
    height: height,
    position: 'relative' // 给父Box加相对定位，作为内部元素的定位基准
  }}
  className={classes.imageExpand}
>
  <img
    src="https://cdn.pixabay.com/photo/2022/06/13/15/36/grain-7260250__340.jpg"
    alt="sample"
    className={classes.imageExpand}
    style={{
      position: 'absolute', // 图片用绝对定位铺在父Box里
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      objectFit: 'cover',
      zIndex: 1 // 图片层级设为最低
    }}
  />
  <Box 
    className={classes.container}  // 修正类名拼写
    sx={{
      position: 'relative', // 必须加非static定位，z-index才生效
      zIndex: 2, // 比图片高即可
      // 其余自定义样式
    }} 
  />
  <CloseIcon 
    className={classes.closeIcon} 
    sx={{
      position: 'absolute',
      top: 16,
      right: 16,
      zIndex: 2 // 和子Box同层级，比图片高
    }} 
  />
</Box>

方案2：排查CSS里自动创建层叠上下文的属性 #

如果方案1不生效，检查你imageExpand类的CSS代码，看有没有给img设置以下会自动创建层叠上下文的属性：

• transform属性值不为none
• opacity值小于1
• filter/perspective/clip-path等属性值不为none
• will-change设置了上述属性
  如果有这类属性，要么删掉不必要的属性，要么给需要浮在上层的子Box也设置同类属性创建同级层叠上下文，再通过z-index控制顺序。

方案3：对齐MUI内置层级规则 #

不要硬编码z-index数值，直接调用MUI主题内置的层级token，和组件库默认层级规则对齐，避免数值冲突：

import { useTheme } from '@mui/material/styles';

// 组件内获取主题
const theme = useTheme();

// 子Box的sx配置
sx={{
  position: 'relative',
  zIndex: theme.zIndex.modal + 1, // 比Modal默认层级高1级，必然显示在最上层
}}

避坑说明 #

• 不要给父级Box设置更低的z-index，会导致整个Modal的层级异常，被页面其他元素遮挡
• z-index: 1000 !important只在样式被更高优先级选择器覆盖时生效，解决不了层叠上下文导致的层级问题，没必要加
• 如果元素是默认的position: static，设置任何z-index都不会生效

内容的提问来源于stack exchange，提问作者Happy1234