鼠标悬停时Div覆盖绝对定位元素的问题排查

我用MUI Box开发组件：两个蓝色Div置于居中的红色绝对定位Div后方，要求后方Div边缘可见。设置鼠标悬停时Div缩放至1.2倍，左侧蓝色Div表现正常，但右侧蓝色Div悬停时会跑到红色居中Div前方，挡住它。技术栈为Material UI + Framer Motion。

代码如下：

<div className="App">
  <Box
    sx={{
      display: "flex",
      flexDirection: "row",
      width: "100%",
      height: "500px",
      justifyContent: "space-around",
    }}
  >
    <Box
      component={motion.div}
      whileHover={{
        scale: 1.2,
      }}
      sx={{
        display: "block",
        width: "40%",
        height: "40%",
        backgroundColor: "blue",
      }}
    />
    <Box
      component={motion.div}
      sx={{
        width: "60%",
        height: "30%",
        position: "absolute",
        backgroundColor: "red",
      }}
      initial={{
        opacity: 1,
        scale: 1,
      }}
      whileHover={{
        scale: 1.1,
      }}
      animate={{}}
      transition={{
        duration: 0.5,
        ease: "easeInOut",
      }}
    />
    <Box
      component={motion.div}
      whileHover={{
        scale: 1.2,
      }}
      sx={{
        display: "block",
        width: "40%",
        height: "40%",
        backgroundColor: "blue",
      }}
    />
  </Box>
</div>

问题原因 #

DOM结构中右侧蓝色Div排在红色绝对定位Div之后，默认堆叠层级更高。当右侧Div缩放时，就会覆盖在红色Div上方；而左侧Div在红色Div之前，默认层级更低，缩放后不会覆盖。

解决方法 #

给红色绝对定位Div设置更高的z-index，确保它始终处于两个蓝色Div上层：

修改后的红色Box代码：

<Box
  component={motion.div}
  sx={{
    width: "60%",
    height: "30%",
    position: "absolute",
    backgroundColor: "red",
    zIndex: 1, // 添加层级控制
  }}
  initial={{
    opacity: 1,
    scale: 1,
  }}
  whileHover={{
    scale: 1.1,
  }}
  animate={{}}
  transition={{
    duration: 0.5,
    ease: "easeInOut",
  }}
/>

也可以给两个蓝色Div设置zIndex: 0，效果一致。调整后无论哪个Div缩放，红色Div都会保持在最上层。

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