本文讲解如何通过
css
定位与布局优化，解决移动端页面中分类栏目随键盘弹出而上移、元素堆叠错位的问题，确保分类区域（如 popular、fantasy）垂直
排列
且底部固定，不随输入框聚焦或滚动而偏移。
在移动端 Web 开发中，当页面包含输入框（如搜索栏）并聚焦时，系统软键盘会弹出，导致视口高度收缩。若分类模块（
）使用默认的 position: static 或 relative，其内部元素（尤其是 .cards）极易被“顶起”，出现截图中“元素堆叠”“跟随键盘上移”等典型问题。同时，“category fixed at the bottom”的需求，本质上是要求分类容器脱离文档流、锚定在视口底部，而非父容器（如 ）底部。
关键误区纠正
：
答案中建议的 header section .cards { position: fixed; } 存在严重隐患——它将每个 .cards 直接固定在视口坐标系中，会导致多个卡片区域重叠在相同位置（因未设置 top/bottom/left/right），且破坏原有垂直结构（Popular 在上、Fantasy 在下）。这不是解决方案，而是新 bug 的源头。
✅
正确实现思路如下
：
结构优化：分离导航区与内容区
不应将所有 堆在 内。 语义上代表页首（如 Logo、主搜索栏），而分类导航属于
主导航模块
，建议独立为 
