本文详解因 `position: fixed` 误用导致内容层叠、无法正常滚动显示的问题，通过重构定位策略（改用 `absolute` + `z-index` + `100vh` 分节）实现清晰分页式布局，并提供可直接运行的完整代码方案。

在构建产品落地页（如旅行 agency 网站）时，一个常见却隐蔽的布局陷阱是：后续

。从你提供的代码可见，问题根源在于 .container 类被错误地设为 position: fixed：

.container {position: fixed;  /* ❌ 关键错误：强制脱离文档流，固定于视口坐标 */   top: 38%;   left: 32%;   text-align: center;}

该声明使 .container（含

、 等）脱离常规文档流，不再占据空间；而 高度被设为 100%，但未设置 overflow: scroll 或明确高度撑开，导致后续

实际渲染在 的起始位置（即视口顶部），视觉上完全覆盖首屏——并非 HTML 结构错误，而是 CSS 定位逻辑冲突所致。

✅ 正确解法：结构化分屏 + 层级控制

我们采用「绝对定位 分节 + 固定居中内容」的组合模式，确保每块内容独占一屏、按序垂直堆叠：

1. 外层 section 使用 position: absolute
   每个 section 占满整个视口高度（height: 100vh），并通过 top 值精确控制纵向位置：

   section {position: absolute;   width: 100%;   height: 100vh;   top: 0; /* 第一屏 */   z-index: 1;} section:nth-child(2) {top: 100vh; z-index: 2;} section:nth-child(3) {top: 200vh; z-index: 3;}

2. 内层内容容器使用 position: fixed 居中
   在每个 section 内部嵌套 .fixed 容器，利用 transform: translate(-50%, -50%) 实现响应式居中，同时避开导航栏遮挡：

   .fixed {position: fixed;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   padding-top: calc(1rem + var(--navBarHeight)); /* 避开固定导航栏 */ }

3. 包裹所有分节的

   设为 position: relative
   
   为 section 提供定位上下文，避免与其他元素（如 header）产生层级冲突。

? 完整修复代码（精简版）

                   
     
            
   
    
          
       
         
iTravel
         
Travelling has never been easier
         

Book Flights Now