Html 什么'；在固定导航栏上使用具有相对位置属性的包装器有什么意义？

我正在尝试创建一个类似的网站，在这样做的同时，我会不时偷偷地窥探该网站的源代码。我感兴趣的是navbar用一个div元素包装，该元素具有position:relative属性。它看起来像这样： Html

---

我认为Html/CSS代码的其余部分不应该很重要。无论如何，我删除了div元素，看起来没有什么不同。那么这有什么意义呢？

它看起来像是

#页面包装器

包装了整个代码笔，这意味着它是整个页面的包装器，而不仅仅是页眉。Position-fixed~MDN：如果Position属性是固定的，则包含块由视口（在连续媒体的情况下）或页面区域建立（对于分页媒体）我本来打算从中举出一个例子，但它太单调了。HTML代码是根据它们在代码中的位置一个接一个地绘制的。但是当我们采用CSS定位时，它（即相对）保持了按照代码放置的状态，但绝对将流从基于代码的放置流中分离出来，并统计它自己的绘制时间广告从左上角开始。在大多数情况下，绝对会从主体标记开始，就像在x-y坐标中一样。但是如果它被包装在父元素（例如div）或其他封装元素中，它将停止在其轨迹中。因此，我们包装东西，以停止从主体x-y坐标到绝对的所有过程。并非所有应用于某人的CSS都在使用ful。在您的代码中（正如您所注意到的），它根本不需要。如果涉及更多CSS，它可能会变得需要

<div id="page-wrapper">
  <header id="header">
    <div class="logo">
      <img
        id="header-img"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo"
      />
    </div>

    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>

#page-wrapper {
  position: relative;
}
header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}