Javascript按钮导航与导航栏重叠

Question

我在屏幕底部有一个导航栏。在底部导航中，我有一个名为“添加”的按钮，单击后将打开一个模式。我必须使用Z-index样式，以便在打开模态时无法打开“顶部”导航菜单。

我试图弄清楚一旦激活，如何停止底部导航与顶部导航侧菜单的重叠。

// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });


// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
  let elems = document.querySelectorAll('.modal');
  let instances = M.Modal.init(elems);
});

.nav-padding{
     margin-top: 60px;
    }

    nav { 
     position: fixed;
     z-index: 1001;
    }

    .trashbin {
      padding-right: 30px !important;
      padding-left: 30px !important;
    }


/* */

body {
    margin: 0 0 55px 0;
}

.bottom_nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
    z-index: 1002;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
    background-color: #eeeeee;
}

.nav__link--active {
    color: #009578;
}

.nav__icon {
    font-size: 18px;
}

<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<nav class="nav-wraper black">
  <a href="" class="center brand-logo"></a>
  <ul>
    <li class="right"><a href="#" class="white-text">Sign In
      </a>
    </li>
  </ul>

  
  <!-- Side Navagation -->
  <ul id="slide-out" class="sidenav">
 <li>
<li><a><i class="material-icons">fitness_center</i>
        <p class="">Templates</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Bill</p>
      </a></li>
    <li></li>
    <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>&</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect ">
        <p>Ben</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>The</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Flower​Pot</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Men</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
  

  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</nav>


<footer class="bottom_nav">

  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">dashboard</i>
    <span class="nav__text">Dashboard</span>
  </a>
  <a href="#" class="nav__link nav__link--active">
    <i class="material-icons nav__icon">person</i>
    <span class="nav__text">Profile</span>
  </a>
  
   <a href="#add_exercise_column" class="nav__link modal-trigger">
    <i class="material-icons nav__icon">add_box</i>
    <span class="nav__text">Add</span>
   </a>
   <div class="modal modal-position" id="add_exercise_column">
    <div class="valign-wrapper center-align">
      <div class="row">
        <form class="col s12 valign-wrapper center-align">
          <div class="input-field"> 
           <div class="remove_label">
            <label><h6>Add</h6></label>
           </div> 
           <div class="removebtn-padding">
            <input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
          </div> 
          </div>
        </form>
       </div>  
    </div>
   </div>
  
  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">lock</i>
    <span class="nav__text">Privacy</span>
  </a>
  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">settings</i>
    <span class="nav__text">Settings</span>
  </a>
</nav>
</footer>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- app.JavaScript -->
<script src="app.js"></script>

Answer 1

可能只需要更改：

z-index: 1002;

to

z-index: 1000;