本文详解因 `position: fixed` 误用导致内容层叠、无法正常滚动显示的问题，通过重构定位策略（改用 `absolute` + `z-index` + `100vh` 分节）实现清晰分页式布局，并提供可直接运行的完整代码方案。
在构建产品落地页（如旅行 agency 网站）时，一个常见却隐蔽的布局陷阱是：后续 <section> 始终“悬浮”在首屏内容上方，无法随滚动自然呈现。从你提供的代码可见，问题根源在于 .container 类被错误地设为 position: fixed：
.container {
position: fixed; /* ❌ 关键错误：强制脱离文档流，固定于视口坐标 */
top: 38%;
left: 32%;
text-align: center;
}该声明使 .container（含 <h1>、<button> 等）脱离常规文档流，不再占据空间；而 <body> 高度被设为 100%，但未设置 overflow: scroll 或明确高度撑开，导致后续 <section class="description"> 实际渲染在 <body> 的起始位置（即视口顶部），视觉上完全覆盖首屏——并非 HTML 结构错误，而是 CSS 定位逻辑冲突所致。
✅ 正确解法：结构化分屏 + 层级控制
我们采用「绝对定位分节 + 固定居中内容」的组合模式，确保每块内容独占一屏、按序垂直堆叠：
-
外层 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; } -
内层内容容器使用 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)); /* 避开固定导航栏 */ } 包裹所有分节的 <main> 设为 position: relative
为 section 提供定位上下文，避免与其他元素（如 header）产生层级冲突。
? 完整修复代码（精简版）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iTravel Agency</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --navBarHeight: 3.5rem; }
body {
font-family: 'Heebo', sans-serif;
background: url("61766.jpg") no-repeat center/cover;
overflow-x: hidden;
}
/* 导航栏：固定于顶部 */
.nav-container {
position: fixed;
top: 0; width: 100%;
height: var(--navBarHeight);
background: rgb(0, 221, 221);
z-index: 1000;
}
/* 分节容器：每屏独立定位 */
main { position: relative; }
section {
position: absolute;
width: 100%;
height: 100vh;
text-align: center;
padding: 1rem;
background: white;
}
section:nth-child(1) { top: 0; z-index: 1; }
section:nth-child(2) { top: 100vh; z-index: 2; background: lightcyan; }
section:nth-child(3) { top: 200vh; z-index: 3; background: white; }
/* 居中内容 */
.fixed {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding-top: calc(1rem + var(--navBarHeight));
}
h1 { font-size: 5rem; color: #000; }
h3 { font-size: 2.5rem; color: #000; }
.btn {
width: 300px; height: 80px;
background: #04d9ff; color: aqua;
border: none; border-radius: 4px;
font-size: 2rem; cursor: pointer;
}
</style>
</head>
<body>
<header>
<div class="nav-container">
<nav class="navbar">
<h3 id="navbar-logo">iTravel</h3>
<ul class="nav-menu">
<li><a href="#" class="nav-links">Home</a></li>
<li><a href="#" class="nav-links">Flights</a></li>
<li><a href="#" class="nav-links">Hotels</a></li>
<li><a href="#" class="nav-links">My Bookings</a></li>
<li><a href="#" class="nav-links nav-links-btn">Log In</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- 首屏 -->
<section class="booknow">
<div class="fixed">
<h1>iTravel</h1>
<h2>Travelling has never been easier</h2>
<button class="btn">Book Flights Now</button>
</div>
</section>
<!-- 第二屏 -->
<section class="description">
<div class="fixed">
<h3>Why fly with us?</h3>
<p>A travel agency like ours offers a one-stop solution for all your travel needs.</p>
</div>
</section>
<!-- 第三屏（可扩展） -->
<section class="findDeals">
<div class="fixed">
<h3>Check out these deals!</h3>
</div>
</section>
</main>
</body>
</html>⚠️ 注意事项
- 移除全局 body { height: 100% }：它会压制文档自然高度，导致滚动失效；改为 min-height: 100vh 或直接删除（由 section 的 100vh 驱动高度）。
- 导航栏需设 z-index > 1：确保其始终位于所有 section 之上（示例中设为 1000）。
- 移动端适配：在媒体查询中调整 font-size 和 padding，避免小屏文字溢出。
- 无障碍访问：为 .fixed 元素添加 aria-hidden="true" 并配合 inert 属性（或 JS 动态控制），防止屏幕阅读器读取非当前屏内容。
此方案既保持视觉上的分屏沉浸感，又符合语义化 HTML 结构，彻底解决“后区块覆盖前区块”的顽疾。
