需要父级div位于子级之上，React和tailwind，

Question

这个motion div是一个侧边栏，菜单项是一个类别，该类别打开另一个侧边栏嵌套第一个，但第二个侧边栏位于父级之上，帮助。

  <AnimatePresence mode="wait" initial={false}>
    {open && (
      <>
        <motion.div {/* this is the white sidebar */}
          {...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} /> // children
        </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>
  {/* this red div is above the white sidebar */}
  {isExpanded && <div className="w-[391px] h-20 bg-red-200 absolute top-0 left-[200px] -z-10"></div>}
</div>

我需要子元素上方的父元素

Answer 1

你尝试过使用 z-index 吗？

<AnimatePresence mode="wait" initial={false}>
  {open && (
    <>
      <motion.div
        {...framerSidebarBackground}
        className="w-full bg-black/50 absolute left-0 top-[127px] h-screen z-10"
      ></motion.div>
      <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>
    </>
  )}
</AnimatePresence>

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