页面后续内容无法正常向下排列、而是堆叠在首屏顶部，根本原因是 `.container` 使用了 `position: fixed` 且未设置高度与文档流脱离，导致后续 `

在构建单页产品落地页（如旅行 agency 官网）时，常见的布局陷阱之一就是误用 position: fixed 导致内容层叠错乱。你当前代码中关键问题出在这里：

.container {   position: fixed; /* ⚠️ 问题根源 */   top: 38%;   left: 32%;   text-align: center; }

fixed 定位使 .container 脱离标准文档流，其后的所有元素（包括

✅ 正确解法：恢复文档流 + 合理分节

只需移除 .container 的 position: fixed，并为每个主区块设置明确的高度与垂直间距即可：

/* 移除 .container 的 fixed 定位，改为相对定位或默认静态定位 */ .container {   /* 删除 position: fixed; top/left */   text-align: center;   padding: 4rem 1rem;   max-width: 1200px;   margin: 0 auto; }  /* 为每个 section 设置最小视口高度，确保分屏滚动效果 */ section {   min-height: 100vh;   padding: 6rem 1rem;   box-sizing: border-box; }  /* 首屏背景图需保留在 body 或独立 section 中 */ body {   background-image: url("61766.jpg");   background-repeat: no-repeat;   background-size: cover;   background-attachment: fixed; /* 可选：增强视差感 */ }

对应 html 结构优化为语义化分节：

      
        
 
   
   
     
iTravel
     
Travelling has never been easier
     Book Flights Now   
 
   
   
     
Why fly with us?
     
A travel agency like ours offers a one-stop solution...
   
 
   
...
 
...

? 关键注意事项

• 导航栏可 fixed，但内容容器不可随意 fixed：.nav-container 设为 position: fixed 是合理的（实现吸顶导航），但 .container 作为内容载体必须参与文档流。
• 避免全局 height: 100% 滥用：你原 css 中 html, body { height: 100% } 会限制子元素撑开高度的能力，建议仅对需要全屏的 section 使用 min-height: 100vh。
• 媒体查询兼容性：确保 @media (max-width: $bp-s) 中的 sass 变量已正确定义（或替换为具体像素值，如 768px），否则响应式失效可能加剧布局异常。
• z-index 仅在定位元素间生效：若所有区块都 position: Static（默认），z-index 无效；只有当需要重叠交互（如模态框）时才需显式设置。

✅ 总结

修复本质是回归标准文档流：删除非必要的 position: fixed，用 min-height: 100vh + padding/margin 控制分屏高度，配合语义化