本文讲解如何通过 css 定位与布局优化，解决移动端页面中分类栏目随键盘弹出而上移、元素堆叠错乱的问题，确保分类区域（如 fantasy、action）垂直排列且底部固定，不随输入框聚焦或滚动而偏移。
在移动端 Web 开发中，当页面包含 或
你当前的 HTML 结构如下：
Popular
Fantasy
⚠️ 注意：直接对 .cards 设置 position: fixed（如答案中所提）是错误且危险的。原因有三：
- fixed 会使 .cards 脱离文档流，脱离其父
和 ，导致层级混乱、尺寸失控； - 多个 fixed 元素会相互覆盖（因默认 top: 0; left: 0），无法实现“上下依次排列”；
- 它无法解决
整体被键盘挤压的问题，反而加剧布局断裂。
✅ 正确解法应分三层控制：
1. 固定整个分类区域容器（）
让
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. 确保各 垂直堆叠（默认即满足），并赋予合理间距
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 保证可点区域；
-
无障碍支持：为
添加 role="region" 和 aria-labelledby，提升可访问性。
最终效果：分类标题（Popular、Fantasy…）垂直排列，.cards 横向可滑动，整个
