Javascript 底部导航与 sidenav 重叠

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>FlowerPot</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;

到

z-index: 1000;

并将模态框移到页脚之外。

// 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: 1000;
}

.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>FlowerPot</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>
   
  
  <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>
<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>

<!-- 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>

Javascript 底部导航与 sidenav 重叠

Javascript Botton navigation is overlapping side nav

html

javascript

css

materialize