React+Tailwind侧边栏层级问题：需让父元素显示在子元素之上

我在React和Tailwind项目里用motion组件实现了一个白色侧边栏，侧边栏内的MenuItem是分类项，点击分类会展开嵌套的第二个侧边栏，但当前红色的子侧边栏覆盖在白色父侧边栏上方，需要让父侧边栏显示在子元素之上。

父组件代码 #

<AnimatePresence mode="wait" initial={false}>
    {open && (
      <>
        <motion.div {/* 白色父侧边栏 */}
          {...framerSidebarPanel}
          className="w-[391px] bg-white absolute left-0 top-[127px] py-12 h-screen z-50 shadow-side"
          ref={overlayRef}
        >
          <MenuItem text={text.fon} expanded={1} sub={fonSubCategories} /> {/* 子组件 */}
        </motion.div>
        <motion.div
          {...framerSidebarBackground}
          className="w-full  bg-black/50 absolute left-0 top-[127px] h-screen z-10"
        ></motion.div>
      </>
    )}
  </AnimatePresence>

MenuItem组件代码 #

<div className="relative h-[63px] my-2 py-1 hover:bg-zinc-100 flex items-center text-xl text-blue-400 hover:text-cyan-700 font-semibold leading-tight ">
  <div className="flex gap-28 items-center absolute right-10">
    <div className="min-w-[130px]">{text}</div>
    <ArrowForwardIosIcon sx={!sub && { opacity: 0 }} />
  </div>
  {/* 这个红色div现在覆盖在白色侧边栏上方 */}
  {isExpanded && <div className="w-[391px] h-20 bg-red-200 absolute top-0 left-[200px] -z-10"></div>}
</div>

解决方法 #

问题根源在于z-index的层级规则和定位上下文：

• 白色父侧边栏设置了z-50，但MenuItem是它的子元素且自身为relative定位，红色子div的-z-10仅相对于MenuItem容器生效，不会让它跑到父侧边栏下方。
• 要让父侧边栏显示在子元素上方，有两种简单方案：
  1. 调整红色子div的z-index，让它低于父侧边栏的层级：

     {isExpanded && <div className="w-[391px] h-20 bg-red-200 absolute top-0 left-[200px] z-40"></div>}
     

     Tailwind的z-index是全局生效的，z-40小于父侧边栏的z-50，父侧边栏会自然显示在红色div上方。
  2. 给白色父侧边栏设置更高的z-index值（比如z-[60]），确保它的层级高于红色子div，同时保持红色div的z-index低于该值。

注意：绝对定位元素的层级由z-index决定，数值越大显示越靠上，只要两者处于同一定位上下文（或全局上下文），层级规则就会生效。

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