如何创建固定定位的Flexbox头部？解决固定后背景消失问题

问题出在position: fixed的特性上：设置该属性后，元素会脱离文档流，不再继承父元素或全局的背景样式，同时默认宽度会收缩为内容宽度，导致原本的黑色背景“消失”（实际是元素本身无背景，下方内容透显）。

以下是修复方案：

• 给.nav-container添加黑色背景色，确保固定后自身有背景
• 设置width: 100%让头部占满屏幕宽度
• 增加z-index保证头部始终在页面内容上方
• 给body添加顶部内边距，避免页面内容被固定头部遮挡

修改后的CSS代码：

body {
  margin: 0;
  padding-top: 69px; /* 和头部高度一致，避免内容被遮挡 */
  background-color: black; /* 保留全局黑色背景 */
}

.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  border-bottom: 1px solid seashell;
  height: 69px;
  align-items: center;
  justify-content: space-between;
  background-color: black; /* 给头部添加黑色背景 */
  width: 100%; /* 占满屏幕宽度 */
  z-index: 100; /* 确保头部在最上层 */
  padding: 0 10px; /* 可选，添加左右内边距避免内容贴边 */
}

.navigation {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  color: seashell;
  text-decoration: underline;
}

对应的HTML无需改动，保持原结构即可：

<header>
  <div class="nav-container">
    <a href="#"> <img src="./resources/img-tea-cozy-logo.png" /></a>
    <ul class="navigation">
      <li><a href="#">Mission</a></li>
      <li><a href="#">Featured Tea</a></li>
      <li><a href="#"> Locations</a></li>
    </ul>
  </div>
</header>

内容的提问来源于stack exchange，提问作者prnce