覆盖不覆盖导航栏

Question

我通过将内容类 margin-top 设置为 10 rem 将导航栏和内容部分分开，因为当我单击 Open 图标时，覆盖不会覆盖顶部 10rem 区域。有人可以帮我吗？下面是我的代码

---

$(document).ready(function() {

  $("#openNav").click(function() {
    $("#mySidenav").css({
      'width': '20%'
    });
    $(".overlay").css({
      'position': 'fixed',
      'display': 'block',
      'background-color': 'rgba(0, 0, 0, 0.5)',
      'z-index': ' 2',
      'height': '100%',
      'width': '100%'
    });
  });


  $(".closebtn").click(function() {
    $("#mySidenav").css({
      'width': '0'
    });
    $(".overlay").css({
      'display': 'none',
      'background-color': 'rgba(0, 0, 0, 0)'
    });
  });

});

body {
  font-family: "Lato", sans-serif;
  /* background-color: rgba(0, 0, 0, 0.5); */
}

.overlay {
  display: none;
  height: 100%;
  width: 100%;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  border-style: solid;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.navbarTest4 {
  width: 100%;
  text-align: right;
  background-color: white;
  height: 100px;
  border-style: solid;
  position: fixed;
  top: 0;
}

.content {
  margin-top: 10rem;
  border-style: solid;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay"></div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<nav class="navbarTest4">
  <div id="openNav">
    <span style="font-size:30px;cursor:pointer">&#9776; open</span>
  </div>
</nav>

<section class="content">
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text. .</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</section>

---

我尝试将覆盖类放在 body 标记中，但没有奏效。我已经尝试将覆盖 div 包裹在整个文档中，它也不起作用。

Answer 1

您可以将top: 0 添加到您的覆盖类。 这将使覆盖 div 从窗口的最高点开始。