如何去掉页面顶部白边并将导航栏与logo置于视差背景图内

• 你的DOM结构顺序错误：导航栏（.navbar）放在了视差背景容器<header>之外，导航所在区域没有背景覆盖，直接透出了页面默认的白色底色，就是你看到的顶部白边
• 导航栏默认是普通文档流布局，没有锚定在视差背景区域的顶部，层级也不足以显示在背景元素上层

第一步：调整HTML结构 #

将整个.navbar代码块移动到<header>标签内部，放在<h1>、<h2>之前即可：

<body>
    <header>
        <!-- 把导航移到此处 -->
        <div class="navbar">
            <img src="officialipng.png" class="logo">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Ratgeber</a></li>
              <li><a href="#">Über uns</a></li>
              <li><a href="#">Kontakt</a></li>
            </ul>
        </div>
        <h1>Think Tank</h1>
        <h2>Finanzen • Business • Mindset</h2>
    </header>
    <div class="container">
        <!-- 原有内容全部保持不变 -->
    </div>
</body>

第二步：修改CSS样式 #

给.navbar新增定位和层级属性，原有其他CSS规则全部保留，视差效果不会受任何影响：

.navbar {
  /* 原有属性保持不变 */
  width: 85%;
  margin: auto;
  padding: 35px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 新增以下属性 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

修改完成后导航栏会固定显示在视差背景图的顶部，原有视差滚动效果完全保留，顶部白边消失。

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