本文详解因 `position: fixed` 误用导致页面后续区块无法正常流式布局的典型问题，并提供基于标准文档流的修复方案，兼顾可访问性、seo 和响应式兼容性。

在构建产品落地页时，你可能会遇到一个看似神秘却十分常见的布局问题：新添加的

。从你提供的代码来看，根本原因非常明确——.container 类被错误地设为 position: fixed：

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

position: fixed 会使元素脱离标准文档流（normal flow），并相对于视口（viewport）定位。这意味着它不再占据页面空间，其后的所有内容（如

✅ 正确解法：回归文档流 + 合理高度控制

无需复杂 parallax 或 z-index 层叠技巧（原答案中 absolute + z-index + 100vh 的方案虽能实现视觉效果，但牺牲了语义结构、可访问性和 seo 友好性）。标准、健壮、推荐的修复方式如下：

1. 移除 .container 的 position: fixed，改用 position: relative 或直接删除定位声明；
2. 为 header 区域显式设置最小高度，确保其撑开页面空间；
3. 利用 flexbox 或 Grid 实现垂直居中（更现代、更可靠）；
4. 确保 body 内容自然流式排列。

✅ 推荐修复后的 css（精简关键部分）

/* 移除 .container 的 fixed 定位，改用 flex 布局居中 */ header {   min-height: 100vh; /* 确保首屏占满视口高度 */   display: flex;   flex-direction: column;   justify-content: center;   align-items: center;   text-align: center;   padding: 0 1rem;   box-sizing: border-box; }  .container {   /* 删除 position: fixed; top/left */   /* 保留必要样式即可 */   max-width: 1200px;   margin: 0 auto; }  h1, h2 {   color: white;   text-shadow: 0 2px 8px rgba(0,0,0,0.3); }  .btn {   margin-top: 1.5rem; }

✅ 对应 html 结构（保持语义化）

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

⚠️ 关键注意事项

• 导航栏可保留 position: fixed（因其需常驻顶部），但必须为其预留 padding-top 或 margin-top，避免内容被遮挡：

  body {   padding-top: 70px; /* 与 .nav-container 高度一致 */ }

• 避免滥用 height: 100% 在 html/body 上：除非明确需要全高容器，否则可能引发高度计算异常；优先使用 min-height: 100vh。
• 媒体查询中的 $bp-s 变量需替换为实际像素值（如 768px），CSS 原生不支持 sass 变量。
• 标签嵌套 是无效 HTML，应改为：

  Book Flights Now

  并在 CSS 中为 .btn 添加 display: inline-block 和 text-align: center。

✅ 总结

页面区块“叠在一起”的本质，是 CSS 定位脱离文档流后引发的空间塌陷。修复的核心不是让后续区块“爬得更高”，而是让首屏内容“站稳脚跟”。通过 min-height: 100vh + Flex 布局 + 合理的导航预留空间，即可实现专业、可维护、无障碍友好的单页布局。记住：优先选择文档流（flow-based）方案，仅在必要时引入定位（positioning）——这是构建稳健前端界面的基本原则。