尽管有 z-index，但内容会越过固定导航栏

Question

我希望内容位于固定导航栏下方，但它位于其上方。我不知道该怎么做。

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px -7px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  align-self: flex-start;
  padding: 0px 10px;
}

.logoutbutton {
  align-self: flex-end;
  margin: auto 30px;
  padding: 5px 10px;
  background: none;
  outline: none;
  border: 1px solid;
  border-radius: 2px;
  transition: 0.2s all;
}

.logoutbutton:hover {
  background: #eeeeee;
}

.layout-wrapper {
  display: flex;
  position: relative;
  top: 56px;
}

.left-navigation-drawer {
  display: block;
  position: fixed;
  height: 100vh;
  width: 270px;
  line-height: 50px;
  box-shadow: 5px 0px 5px -7px;
}

.left-navigation-drawer a {
  text-decoration: none;
  max-width: 100%;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  padding-left: 20px;
}

.left-navigation-drawer a:hover {
  background-color: lemonchiffon;
}

.main-content {
  position: relative;
  left: 270px;
  padding-left: 50px;
}

<body>
  <div class="navbar">
    <div class="logo">
      <h3>MyWebsite</h3>
    </div>
    <input class="logoutbutton" type="submit" value="Logout">
  </div>
  <div class="layout-wrapper">
    <div style="padding-top: 20px;" class="left-navigation-drawer">
      <nav>
        <a href=""><span><i style="font-size:18px;" class="fas fa-keyboard"></i></span>&nbsp;&nbsp; Content</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-info-circle"></i></span>&nbsp;&nbsp; Account Details</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-user-cog"></i></span>&nbsp;&nbsp; Account Settings</a>
      </nav>
    </div>

    <div class="main-content">
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>

    </div>
  </div>

</body>

</html>

Answer 1

代码中的一切都很好，您需要为页眉添加背景颜色。

由于该元素是透明的，因此当您滚动时它会在下方但由于没有背景，它似乎是从顶部开始的。

更新css 添加背景颜色。

.navbar{
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px -7px;
  position: fixed;
  top:0;
  width: 100%;
  z-index: 1000;
  background:#fff;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px -7px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

.logo {
  align-self: flex-start;
  padding: 0px 10px;
}

.logoutbutton {
  align-self: flex-end;
  margin: auto 30px;
  padding: 5px 10px;
  background: none;
  outline: none;
  border: 1px solid;
  border-radius: 2px;
  transition: 0.2s all;
}

.logoutbutton:hover {
  background: #eeeeee;
}

.layout-wrapper {
  display: flex;
  position: relative;
  top: 56px;
}

.left-navigation-drawer {
  display: block;
  position: fixed;
  height: 100vh;
  width: 270px;
  line-height: 50px;
  box-shadow: 5px 0px 5px -7px;
}

.left-navigation-drawer a {
  text-decoration: none;
  max-width: 100%;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  padding-left: 20px;
}

.left-navigation-drawer a:hover {
  background-color: lemonchiffon;
}

.main-content {
  position: relative;
  left: 270px;
  padding-left: 50px;
}

<body>
  <div class="navbar">
    <div class="logo">
      <h3>MyWebsite</h3>
    </div>
    <input class="logoutbutton" type="submit" value="Logout">
  </div>
  <div class="layout-wrapper">
    <div style="padding-top: 20px;" class="left-navigation-drawer">
      <nav>
        <a href=""><span><i style="font-size:18px;" class="fas fa-keyboard"></i></span>&nbsp;&nbsp; Content</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-info-circle"></i></span>&nbsp;&nbsp; Account Details</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-user-cog"></i></span>&nbsp;&nbsp; Account Settings</a>
      </nav>
    </div>

    <div class="main-content">
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>

    </div>
  </div>

</body>

</html>

尽管有 z-index，但内容会越过固定导航栏

Content goes over top of fixed navbar despite z-index

html

css

z-index