17370845950

页面后续 section 始终叠加在首屏内容之上，根本原因是 `.container` 使用了 `position: fixed` 且未限制其父容器高度，导致文档流塌陷、后续内容失去正常定位上下文。

这个问题本质是 CSS 定位与文档流的典型冲突：你为首页主内容区域（.container）设置了 position: fixed，使其脱离文档流并固定在视口坐标（top: 38%; left: 32%），但 fixed 元素不会占据空间，因此

✅ 正确解法不是强行用 z-index 或绝对定位堆叠，而是恢复正常的文档流秩序：

1. 移除 .container 的 position: fixed
   首屏内容应作为普通流内元素存在。若需居中展示，改用现代布局方案：

   .container {
     /* 删除 position/fixed/top/left */
     text-align: center;
     padding: 8rem 1rem 0; /* 为导航栏留出顶部空间 */
     margin: 0 auto;
     max-width: 1200px;
   }

2. 

   确保

   具备真实高度
   
   当前 .nav-container 已设 height: 70px，但因内部 .navbar 有 height: 80px 且未清除浮动/未触发 BFC，建议显式设置：

   .nav-container {
     height: 80px; /* 与 navbar 一致 */
     position: sticky; /* 可选：实现吸顶导航 */
     top: 0;
     z-index: 1000;
   }

3. 为 设置最小高度，保障滚动基础
   将 height: 100% 改为 min-height: 100vh，避免内容不足时无法滚动：

   body {
     min-height: 100vh; /* 关键！替代 height: 100% */
     margin: 0;
     font-family: 'Heebo', sans-serif;
     line-height: 1.45;
   }

4. 后续 section 采用标准流布局（推荐）
   移除所有 position: absolute/fixed 的 hack 式写法，让每个 section 自然垂直排列：

   
     
       
   Why fly with us?
       
   A travel agency like ours offers a one-stop solution...
     
   

   section {
     padding: 6rem 1rem;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
   .section-content {
     max-width: 800px;
     text-align: center;
   }

⚠️ 注意事项：

• 不要滥用 position: fixed/absolute 处理常规分屏布局，它会破坏可访问性（屏幕阅读器顺序错乱）和响应式行为；
• z-index 仅对定位元素（relative/absolute/fixed/sticky）生效，对静态元素无效；
• 检查浏览器开发者工具的「Computed」面板，确认每个元素的 position 和 height 是否符合预期；
• 若需视差效果，请使用 background-attachment: fixed 或 CSS Scroll-driven Animations，而非手动计算 top: 200vh。

总结：布局重叠的本质是文档流断裂。修复核心在于——让首屏内容回归文档流，用 min-height: 100vh 保证页面可滚动，用 flex 或 grid 实现内容居中，而非依赖 fixed 定位强行“钉”住元素。这样后续区块自然跟随滚动，结构清晰、语义正确、维护成本低。