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

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

.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）——这是构建稳健前端界面的基本原则。