Question

我正在为我的react应用程序使用导航栏，但在导航栏下方显示下拉菜单时遇到问题。我希望下拉菜单从顶部滑动，但不覆盖进度中的导航栏。我的组件结构如下：

我的NavBar组件的位置固定且z-index足够高

<header>
   <nav className={classes.NavBar}>
      <NavItems />
   </nav>
</header>

NavItems包含许多单独的导航项目，当鼠标悬停时，Dropdown组件将显示下拉菜单

<NavItem link="/" exact="true">Home</NavItem>
<NavItem link="/destinations">Destinations</NavItem>
<NavItem link="/services">Services</NavItem>
<Dropdown label="My Trips">
   <DropdownItem link="/manage-booking">Manage Booking</DropdownItem>
   <DropdownItem link="/enquire">Enquire</DropdownItem>
</Dropdown>
<NavItem link="/about-us">About Us</NavItem>

我的Dropdown组件包含DropdownContent类，我希望它位于NavBar下

<ul className={classes.Dropdown}>
   {label}
   <div className={classes.DropdownContent}>
      {children}
   </div>
</ul>

我知道为DropdownContent设置较低的z-index不会起作用，因为它具有转换CSS属性，可以将其自身设置在不同的堆栈上下文中。那么，有没有办法在这种情况下将DropdownContent类放置在Navbar下？

有没有一种方法可以堆叠元素，而不管堆叠顺序和上下文如何？

0 个答案: