Question

使用反应路由器时，您无法使用z-index进行滑出导航，因为存在使<Link>标签无法点击的错误。有没有另一种方法可以让菜单位于它上面的div下面？抱歉，我不是最好的css，我只看到过这样做的人使用z-index属性，我找不到任何教程解释如何在不设置z-index的情况下执行此操作

这是一个代码示例 -

<style>
  .header {
    background: black;
    height: 200px;
    width: 100%;
  }
  .handle {
    background: red;
    height: 50px;
    width: 100%;
  }
  .menu-links {
    background: green;
    height: 285px;
    z-index: -1; /* this is what makes the <Link> tags unclickable */
    width: 100%;
    position: relative;
    box-sizing: border-box;
    transition: all ease-in-out 300ms;
  }
</style>
<header className="header">
  [...]
</header>
<nav>
  <div className="handle" onClick={this.navToggle}>
    <span>Menu</span>
  <div>
  <ul className="menu-links" style={{left: this.state.toggle ? "-285px" : "0px"}}>
    <li><Link to="/home">Home</Link></li>
    <li><Link to="/products">Products</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
  <ul>
</nav>

Answer 1

您可以使用绝对定位来完成此任务。绝对定位的元素将自动位于其相对父元素的顶部

如何在不使用z-index的情况下滑出导航

1 个答案: