本文讲解如何通过 css 定位与布局优化，解决移动端页面中分类栏目随键盘弹出而上移、元素堆叠错位的问题，确保分类区域（如 popular、fantasy）垂直排列且底部固定，不随输入框聚焦或滚动而偏移。
在移动端 Web 开发中，当页面包含输入框（如搜索栏）并聚焦时，系统软键盘会弹出，导致视口高度收缩。若分类模块（
关键误区纠正：
答案中建议的 header section .cards { position: fixed; } 存在严重隐患——它将每个 .cards 直接固定在视口坐标系中，会导致多个卡片区域重叠在相同位置（因未设置 top/bottom/left/right），且破坏原有垂直结构（Popular 在上、Fantasy 在下）。这不是解决方案，而是新 bug 的源头。
✅ 正确实现思路如下：
-
结构优化：分离导航区与内容区
不应将所有堆在 内。 语义上代表页首（如 Logo、主搜索栏），而分类导航属于主导航模块，建议独立为
<body>
<header>
<input type="search" placeholder="Search..." />
<!-- 其他页首内容 -->
</header>
<main class="content">
<!-- 主要内容区域 -->
</main>
<!-- 分类导航：独立于 header，固定在视口底部 -->
<nav class="category-nav">
<section>
<h4>Popular</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">/* 卡片内容 */</div>
</section>
<section>
<h4>Fantasy</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">/* 卡片内容 */</div>
</section>
</nav>
<script src="script.js"></script>
</body>-
CSS 实现：固定定位 + 垂直流式布局
使用 position: fixed 固定整个导航栏，再通过 flex-direction: column 保证各垂直堆叠，并用 bottom: 0 锚定底部：
.category-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
border-top: 1px solid #eee;
padding: 12px 16px;
z-index: 1000;
max-height: 30vh; /* 防止过高遮挡内容 */
overflow-y: auto; /* 内部可滚动，避免溢出 */
}
.category-nav section {
margin-bottom: 16px;
}
.category-nav h4 {
margin: 0 0 8px 0;
font-size: 0.9rem;
color: #333;
}
.category-nav .cards {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.category-nav .cards::-webkit-scrollbar {
display: none; /* Chrome/Safari 隐藏滚动条 */
}-
适配键盘弹出（关键增强）
为防止键盘遮挡，可监听 focus/blur 事件动态调整 .category-nav 的 bottom 值，或更稳妥地使用 env(safe-area-inset-bottom)（iOS 安全区域）：
.category-nav {
/* 兼容 iPhone 底部安全区 */
padding-bottom: env(safe-area-inset-bottom, 0);
/* 当键盘弹出时，系统会自动缩小视口，fixed 元素自然上移 —— 这正是我们期望的行为 */
}⚠️ 注意事项：
- 避免对 .cards 单独设 position: fixed，否则破坏 DOM 流式顺序；
- 若必须保留在
内，请改用 position: sticky + bottom: 0，但需确保 本身有足够高度且非 overflow: hidden； - 移动端测试务必在真机（尤其 iOS）验证，软键盘行为存在系统差异；
- 为提升体验，可为 .category-nav 添加 transition: transform 0.2s ease，配合 JS 在键盘弹出时轻微上滑，避免突兀跳变。
综上，核心原则是：用语义化结构划分区域，用 fixed + flex column 实现垂直固定导航，用 safe-area-inset 和 overflow-y 保障兼容性与可用性。这样既满足“分类固定底部”“上下排列”“不随键盘偏移”的全部需求，又保持代码健壮与可维护性。
