Question

console.log("Connected");
$('[data-toggle="slide-collapse"]').on('click', function() {
  $navMenuCont = $($(this).data('target'));
  $navMenuCont.animate({
    'width': 'toggle'
  }, 350);
});


function openNav() {

  if (window.matchMedia("(min-width: 641px)").matches) {
    document.getElementById("mySidenav").style.width = "250px";

  } else {
    document.getElementById("mySidenav").style.width = "180px";
  }
  document.getElementById("mySidenav").style.boxShadow = "0.6px 0.6px 10px black";
  $('.overlay').show();
}

$(document.body).click(function(evt) {
  var snav = $("#mySidenav");
  var itselements = $(".nottarget");
  if (!snav.is(evt.target) && !itselements.is(evt.target) && window.matchMedia("(max-width: 768px)").matches) {
    document.getElementById("mySidenav").style.width = 0;
    $('.overlay').hide();
  }
});

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  $('.overlay').hide();

}

.overlay {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.589);
  z-index: 2;
}

#navbar {
  width: 100%;
  margin-bottom: 100px;
  padding: 0;
  background-image: linear-gradient(rgba(23, 52, 124, 1), rgba(23, 52, 124, .9));
  height: 35px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, .51);
}

.sticktop {
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  z-index: 1;
  /*Add this*/
}

.sidenav a {
  font-size: 16px;
  display: block;
  transition: .3s;
  text-decoration: none;
  color: #818181;
}

.sidenav .closebtn {
  font-size: 36px;
  position: absolute;
  top: 0;
  right: 25px;
  margin-left: 50px;
}

#logo img {
  width: 180px;
}

#ham {
  padding: 1px;
  opacity: .75;
}

#ham:hover {
  opacity: 1;
}

.thirtytwoleft {
  overflow: hidden;
  padding: 8px 8px 8px 32px;
  white-space: nowrap;
}

.navlink {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="p_one.css">

</head>

<body>

  <div class="overlay">
  </div>

  <ul id="navbar" class="sticktop">
    <div id="mySidenav" class="sidenav nottarget">
      <a href="javascript:void(0)" class="closebtn nottarget" onclick="closeNav()">&times;</a>
      <a id="logo" class="nottarget" href="/">
        <img class="nottarget" src="logo.png" alt="Logo">
      </a>
      <a class="navlink thirtytwoleft nottarget" href="/">Home</a>
      <a class="navlink thirtytwoleft nottarget" href="/login">Login</a>
      <a class="navlink thirtytwoleft oneline nottarget" href="/signup">Sign Up</a>
      <a class="navlink thirtytwoleft nottarget" href="/contact">Contact</a>
    </div>
    <span id="ham" class="nottarget" onclick="openNav()">
            <img class="nottarget" src='ham.png'>
        </span>
  </ul>
  <script src="one.js">
  </script>

</body>

</html>

你好！我是CSS的新手，遇到了一些问题。当我在360px设置中运行此代码时，在单击ham图标时，整个页面都会覆盖黑色。在检查侧面导航（.sidenav）时，其z-index：5和覆盖图（.overlay）具有z-index：2.仍然在sidenav上显示黑色覆盖。我不知道为什么。

此外，当我禁用具有z-index：1和position：fixed的.sticktop类时，我注意到一切正常。请帮忙！

z-index已应用，但未按顺序堆叠元素

0 个答案: