Question

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

Vid 查看下拉菜单的行为：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;

CSS 文件用于 MobileNav 组件

    .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;
}

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

1 个答案: