本文讲解如何通过 css 定位与布局优化，解决移动端页面中分类栏目随键盘弹出而上移、元素堆叠错乱的问题，确保分类区域（如 fantasy、action）垂直排列且底部固定，不随输入框聚焦或滚动而偏移。
在移动端 Web 开发中，当页面包含 <input> 或 <textarea> 且用户点击触发软键盘时，浏览器会动态调整视口（viewport），导致 position: relative 或 static 的元素被“顶起”，尤其当所有分类 <section> 均嵌套在 <header> 内且未做高度/定位约束时，极易出现“元素叠在一起”“分类栏跟随键盘上浮”“无法正常滚动子内容”等典型问题。
你当前的 HTML 结构如下：
<body>
<header>
<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>
</header>
</body>⚠️ 注意：直接对 .cards 设置 position: fixed（如答案中所提）是错误且危险的。原因有三：
- fixed 会使 .cards 脱离文档流，脱离其父 <section> 和 <header>，导致层级混乱、尺寸失控；
- 多个 fixed 元素会相互覆盖（因默认 top: 0; left: 0），无法实现“上下依次排列”；
- 它无法解决 <header> 整体被键盘挤压的问题，反而加剧布局断裂。
✅ 正确解法应分三层控制：
1. 固定整个分类区域容器（<header>）
让 <header> 始终锚定在视口底部，不受键盘影响：
header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
z-index: 1000;
padding: 8px 16px;
box-sizing: border-box;
max-height: 50vh; /* 防止过高遮挡内容 */
overflow-y: auto; /* 启用内部滚动 */
}2. 确保各 <section> 垂直堆叠（默认即满足），并赋予合理间距
header section {
margin-bottom: 16px;
padding: 12px;
border-radius: 8px;
background: #f9f9f9;
}
header section:last-child {
margin-bottom: 0;
}3. 为 .cards 设置可滚动的内部容器（关键！）
每个分类下的卡片列表需独立滚动，避免撑开整个 header：
.cards {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 4px 0;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}
/* 隐藏横向滚动条（可选） */
.cards::-webkit-scrollbar {
display: none;
}
.cards {
-ms-overflow-style: none;
scrollbar-width: none;
}✅ 补充建议（提升体验）
- 键盘避让增强：若仍受部分 Android 浏览器影响，可在 JS 中监听 focusin/focusout 事件，临时为 body 添加 padding-bottom 或调整 header 的 bottom 值；
- 响应式适配：为小屏设备设置 min-height: 60px 保证可点区域；
- 无障碍支持：为 <section> 添加 role="region" 和 aria-labelledby，提升可访问性。
最终效果：分类标题（Popular、Fantasy…）垂直排列，.cards 横向可滑动，整个 <header> 始终固定于屏幕底部，完全无视软键盘弹出与页面滚动——真正实现「稳定、可控、专业」的移动端分类导航体验。
