试图在导航栏后面显示汉堡菜单下拉菜单

Question

我花了无数个小时试图弄清楚为什么我的下拉菜单（通过单击汉堡菜单图标打开/关闭）位于导航栏的前面，即使我已经指定了 z 索引、溢出和位置。此问题仅发生在下面的 MobileNav 组件上。 MobileNav 包含一个汉堡图标和实际的下拉菜单。单击汉堡图标后，下拉菜单将关闭或打开。目前它显示在导航组件上方，我很难弄清楚原因。任何帮助将不胜感激。

查看下拉菜单行为的视频：https://www.youtube.com/watch?v=zOBnb6r_RN4&ab_channel=TylerOreskey

下拉菜单应该从导航栏底部出来并靠近导航栏底部。

导航栏组件：渲染 MobileNav 组件

const Navbar = (props) => {
  const [showDropdown, setShowDropdown] = useState(false);
  const dropdownToggleHandler = () => setShowDropdown(!showDropdown);
  const dropdownClosedHandler = () => setShowDropdown(false);

  return (
    <header
      className={classes.Navbar}
      style={{
        position: props.passedNavbar ? "fixed" : "relative",
      }}
    >
      <nav className={classes.MobileNav}>
        <MobileNav
          allNavigationRefs={props.allNavigationRefs}
          scrollToDiv={props.scrollToDiv}
          open={showDropdown}
          closed={dropdownClosedHandler}
          dropdownToggleHandler={dropdownToggleHandler}
        />
      </nav>
    </header>
  );
};

export default memo(Navbar);

导航栏组件的CSS文件：z-index 在这里不起作用。

.Navbar {
  top: 0;
  height: 50px;
  background-color: hsl(213, 27%, 15%);
  border-bottom: #00bfff 3px solid;
  width: 100%;
  z-index: 500;
}

@media (max-width: 500px) {
  .DesktopNav {
    display: none;
  }
}

@media (min-width: 500px) {
  .MobileNav {
    display: none;
  }
}

MobileNav组件

const MobileNav = (props) => {
  return (
    <div className={classes.MobileNav}>
      <DropdownToggle clicked={props.dropdownToggleHandler} />
      <Dropdown open={props.open} allNavigationRefs={props.allNavigationRefs} />
    </div>
  );
};

export default MobileNav;

MobileNav 组件的

CSS 文件

    .MobileNav {
        overflow: hidden;
    }

Dropdown 组件：（它显示在 Navbar 组件上方，我无法让它位于导航栏组件的后面）。

const Dropdown = (props) => {
  let attachedClasses = [classes.Dropdown, classes.Close];

  if (props.open) {
    attachedClasses = [classes.Dropdown, classes.Open];
  }

  return (
    <div className={attachedClasses.join(" ")}>
      <NavigationItems allNavigationRefs={props.allNavigationRefs} />
    </div>
  );
};

export default Dropdown;

Dropdown 组件的

CSS 文件：z-index 在这里不起作用。

.Dropdown {
  background: hsl(212, 87%, 3%);
  height: 200px;
  transition: transform 0.3s ease-out;
  z-index: 400;
  display: block;
}

.Open {
  transform: translate(0, 25%);
}

.Close {
  transform: translate(0, -75%);
}

Answer 1

您对 z-index 的工作方式感到困惑。 将树中的每个级别视为一个层。 假设Navbar 是第 0 层，MobileNav 然后是第 1 层，它的子节点在第 2 层。

默认情况下，z-index 是在同一层的子层中计算的。当position 属性为默认static 时，这是正确的。当您将其更改为 relative 时，您可以指示哪些层将以更直接的方式相互交互。 在 Navbar 上设置 500 z-index 对 MobileNav 来说毫无意义。这不是他的兄弟姐妹，而是他的孩子。

如果您可以更改 DOM 树，这是一个可能的解决方案

 <header
      className={classes.Navbar}
      style={{
        position: props.passedNavbar ? "fixed" : "relative"
      }}
    >
      <nav className={classes.Navbar}>
        <DropdownToggle clicked={props.dropdownToggleHandler} />
      </nav>
      <MobileNav
        className={classes.MobileNav}
        allNavigationRefs={props.allNavigationRefs}
        scrollToDiv={props.scrollToDiv}
        open={showDropdown}
        closed={dropdownClosedHandler}
      />
    </header>

如果您可以更改 CSS，这是一个答案

.Navbar {
  top: 0;
  height: 50px;
  background-color: hsl(213, 27%, 15%);
  border-bottom: #00bfff 3px solid;
  width: 100%;
  position: relative;
}

...

.Dropdown {
  background: hsl(212, 87%, 3%);
  height: 200px;
  transition: transform 0.3s ease-out;
  display: block;
  position: relative;
  z-index: -1;
}