页面后续 section 始终叠加在首屏内容之上，根本原因是 `.container` 使用了 `position: fixed` 且未限制其父容器高度，导致文档流塌陷、后续内容失去正常定位上下文。
这个问题本质是 CSS 定位与文档流的典型冲突：你为首页主内容区域（.container）设置了 position: fixed，使其脱离文档流并固定在视口坐标（top: 38%; left: 32%），但 fixed 元素不会占据空间，因此 <header> 高度实际坍缩为 0，而 <body> 又被设为 height: 100% —— 这导致整个页面可视高度仅由首屏背景图撑开，后续 <section class="description"> 实际渲染在「零高度」的 body 起始位置，视觉上就叠在了固定定位的 .container 之上。
✅ 正确解法不是强行用 z-index 或绝对定位堆叠，而是恢复正常的文档流秩序：
-
移除 .container 的 position: fixed
首屏内容应作为普通流内元素存在。若需居中展示，改用现代布局方案：.container { /* 删除 position/fixed/top/left */ text-align: center; padding: 8rem 1rem 0; /* 为导航栏留出顶部空间 */ margin: 0 auto; max-width: 1200px; } -
确保 <header> 具备真实高度
当前 .nav-container 已设 height: 70px，但因内部 .navbar 有 height: 80px 且未清除浮动/未触发 BFC，建议显式设置：.nav-container { height: 80px; /* 与 navbar 一致 */ position: sticky; /* 可选：实现吸顶导航 */ top: 0; z-index: 1000; } -
为 <body> 设置最小高度，保障滚动基础
将 height: 100% 改为 min-height: 100vh，避免内容不足时无法滚动：body { min-height: 100vh; /* 关键！替代 height: 100% */ margin: 0; font-family: 'Heebo', sans-serif; line-height: 1.45; } -
后续 section 采用标准流布局（推荐）
移除所有 position: absolute/fixed 的 hack 式写法，让每个 section 自然垂直排列：<section class="description"> <div class="section-content"> <h3>Why fly with us?</h3> <p>A travel agency like ours offers a one-stop solution...</p> </div> </section>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 定位强行“钉”住元素。这样后续区块自然跟随滚动，结构清晰、语义正确、维护成本低。
