css位置：固定重叠

Question

我的问题很简单，

我只想在页面的一侧添加一个菜单（导航栏），因此我给了它position fixed。问题在于，我尝试添加的所有 html 元素都会忽略它。 Problem posistion

Answer 1

如果你定位一个元素：

• position: absolute;或
• position: fixed

这会从 文档流 中删除该元素，这意味着，正如您所注意到的，所有其他元素将忽略该 out-of-flow 定位的元素并出现在它上面等等。

您可以在其他元素上使用padding 和margin，以确保它们不会与out-of-flow 定位元素重叠。

---

工作示例：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  padding: 12px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 127);
}

main {
  margin-left: 156px;
}

<main>
  <h1>Main Page</h1>
  <p> This is the main part of the page.</p>
  <p>It has a <code>margin-left</code> of <code>156px</code>.</p>
</main>

<nav>
  <h2>Navigation</h2>
  
  <ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
  </ul>
</nav>