固定 flex 导航栏后面的内容，而不是下面答案

【问题标题】：content behind fixed flex navbar instead of below固定 flex 导航栏后面的内容，而不是下面
【发布时间】：2018-01-10 11:39:54
【问题描述】：

我创建了一个简单的导航栏，并用弹性框排列了它的子元素。导航栏的位置是固定的。但是导航栏后的容器（div）从页面开头而不是导航栏后开始，我相信它被忽略了，因为它的位置属性是固定的。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: whitesmoke;
  padding: 10px;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 40px;
}

.social-icons {
  display: flex;
}

.navbar>.social-icons {}

.logo {
  display: flex;
}

.icon {
  margin-left: 10px;
}

.icon:last-of-type {
  margin-right: 20px;
}

.blocks {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.block {
  display: flex;
  height: 500px;
  width: 100%;
  flex-direction: row;
}

.block:nth-child(even) {
  background-color: purple;
}

.block:nth-child(odd) {
  background-color: cornflowerblue;
}

.email-signup {
  width: 100%;
  padding: 10px;
  height: 300px;
  background-color: darkblue
}

.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: whitesmoke;
  padding: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="navbar">
    <div class="logo">
      <img src="images/iconmonstr-paper-plane-1.svg" alt="">
    </div>
    <div class="social-icons">
      <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div>
    </div>

  </div>
  <div class="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="email-signup"></div>
  <div class="footer">
    <div class="social-icons">
      <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>

</html>

我尝试添加 padding-top: 40px;到正文，但这显示为导航栏上方的空间

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 40px;
}

.navbar {
  background-color: whitesmoke;
  padding: 10px;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 40px;
}

.social-icons {
  display: flex;
}

.navbar>.social-icons {}

.logo {
  display: flex;
}

.icon {
  margin-left: 10px;
}

.icon:last-of-type {
  margin-right: 20px;
}

.blocks {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.block {
  display: flex;
  height: 500px;
  width: 100%;
  flex-direction: row;
}

.block:nth-child(even) {
  background-color: purple;
}

.block:nth-child(odd) {
  background-color: cornflowerblue;
}

.email-signup {
  width: 100%;
  padding: 10px;
  height: 300px;
  background-color: darkblue
}

.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: whitesmoke;
  padding: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="navbar">
    <div class="logo">
      <img src="images/iconmonstr-paper-plane-1.svg" alt="">
    </div>
    <div class="social-icons">
      <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div>
    </div>

  </div>
  <div class="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="email-signup"></div>
  <div class="footer">
    <div class="social-icons">
      <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>

</html>

【问题讨论】：

假设我没看错，您可以尝试将 padding-top: 40px 添加到 .blocks 类

标签： html css flexbox css-position

【解决方案1】：

将padding-top: 40px 添加到您的.blocks 类中。这将使导航栏固定在顶部并向下移动您的块。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.navbar {
  background-color: whitesmoke;
  padding: 10px;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 40px;
}

.social-icons {
  display: flex;
}

.navbar>.social-icons {}

.logo {
  display: flex;
}

.icon {
  margin-left: 10px;
}

.icon:last-of-type {
  margin-right: 20px;
}

.blocks {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 40px;
}

.block {
  display: flex;
  height: 500px;
  width: 100%;
  flex-direction: row;
}

.block:nth-child(even) {
  background-color: purple;
}

.block:nth-child(odd) {
  background-color: cornflowerblue;
}

.email-signup {
  width: 100%;
  padding: 10px;
  height: 300px;
  background-color: darkblue
}

.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: whitesmoke;
  padding: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="navbar">
    <div class="logo">
      <img src="images/iconmonstr-paper-plane-1.svg" alt="">
    </div>
    <div class="social-icons">
      <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div>
    </div>

  </div>
  <div class="blocks">
    <div class="block">Test Content</div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="email-signup"></div>
  <div class="footer">
    <div class="social-icons">
      <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div>
      <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：