位置：固定帖子在菜单下

Question

我希望菜单栏保持固定，但是当我使用 Position: Fixed 时，帖子被损坏并进入菜单下方，我应该怎么做才能将帖子向下滚动到菜单下方一点点。

我把我的代码here.

index.html

<body>
    <header>
      <div class="container">
        <div class="logo">Lorem, ipsum dolor.</div>

        <nav class="container-menu">
          <ul>
            <li><a href="#">home</a></li>
            <li><a href="/#about-section">about</a></li>
            <li><a href="#">skills</a></li>
            <li><a href="#">projects</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <p>
      Lorem...
    </p>
  </body>

menu.css

html {
  box-sizing: border-box;
  border: 3px solid green;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

header {
  border: 5px solid purple;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 3px 10px grey;
  /* position: fixed; */
}

.container {
  border: 3px solid goldenrod;
  position: relative;
  background: tomato;
  top: 0;
  width: 80%;
  margin: 0 10%;
  z-index: 999999;
}

Answer 1

不使用 fixed，而是使用 sticky：

header {
    position: sticky;
    top: 0;
}

Answer 2

只需在第一段中添加一些边距即可：

header + p {
  margin-top: 100px; // example value
}

此外，请注意，当您将某些位置设置为 static 的其他位置时，请设置 top/bottom/left/right 的初始值：

header {
  top: 0;
  left: 0;
  right: 0;
}

Answer 3

如果您将位置固定，其他所有内容都将忽略其边界。所以下一个元素不知道它的高度。您需要将 padding-top 添加到 body（或 .container），其高度与 header.

相同

body{
  padding-top:180px;
}

位置：固定帖子在菜单下

with position: fixed the posts go under the menu

html

css

menu