Как сделать слайд-навигацию без использования z-index

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

Вы можете использовать абсолютное позиционирование для достижения этой цели.Абсолютно позиционированный элемент будет автоматически располагаться поверх своего родителя