搜索弹层为什么总是难做：从层级、滚动锁定到移动端适配

搜索弹层看起来只是一个输入框加一层遮罩，但真做起来经常哪里都不太对。桌面端位置飘，手机端关闭按钮挡内容；白天模式正常，夜晚模式颜色突兀；弹层打开后页面还在滚，关掉以后滚动位置又乱了。

这类问题之所以反复出现，不是因为搜索功能复杂，而是因为搜索弹层同时踩了布局、交互、层级、焦点和移动端适配几个点。它看上去像一个小组件，实际上像一个小页面。

第一个坑通常不是样式，而是定位方式

很多人一开始把搜索层挂在导航容器里，再用 position: absolute 去调位置。短期看起来方便，后面很容易出这些问题：

1. 父级有 `overflow: hidden`，弹层被裁掉
2. 父级有 `transform`，层级和定位基准一起变化
3. 页面结构一改，弹层跟着错位
4. 手机端菜单和搜索层叠在一起

更稳的思路通常是把搜索弹层挂到页面顶层，用 position: fixed 做全局浮层。这样你处理的是“整个视口里的一个层”，不是“导航内部伸出来的一块层”。

搜索层最好分成三部分

我更喜欢把它拆成下面三个区块：

1. 遮罩层
2. 搜索主容器
3. 结果区或建议区

这三个部分职责明确之后，很多样式和交互都会更清楚：

1. 遮罩层负责压背景、承接点击关闭
2. 主容器负责输入框、按钮、关闭入口
3. 结果区负责历史记录、热门搜索、实时结果

如果把所有东西都揉在一个盒子里，后面做阴影、圆角、动画、点击区域时就很容易互相打架。

手机上最容易翻车的是三个点

1. 关闭按钮位置太随意

如果关闭按钮只是“看着差不多就行”，到了手机端通常会出现两种情况：要么离输入框太近，显得挤；要么漂在边缘，像是后加上去的。

关闭按钮最好和搜索胶囊共属一个布局体系，不要像贴纸一样随手贴在某个角落。

2. 输入框聚焦后视口变化

移动端输入框一聚焦，软键盘弹出，视口高度会变化。如果容器高度、顶部定位和结果区高度没有一起考虑，就会出现：

1. 输入框被顶上去
2. 关闭按钮消失
3. 结果区被键盘挡住
4. 页面跟着乱跳

3. 页面底层还在滚动

搜索层打开时，如果底下页面还能滚，用户会很难受。尤其是手机端一边滑动结果、一边把底层页面也带着滚，整个交互会很散。

所以搜索层打开时，最好明确锁住背景滚动。

滚动锁定别只写 `overflow: hidden`

不少项目会在打开弹层时给 body 加一个 overflow: hidden，这一步当然有用，但还不够。更完整的处理通常要考虑：

1. 当前页面滚动位置要不要记住
2. 关闭弹层后要不要恢复到原位置
3. iOS 上的橡皮筋滚动怎么处理
4. 结果区自身是否允许独立滚动

如果只是粗暴地锁 body，桌面端还凑合，移动端往往会出现“关掉弹层后页面位置跑了”的问题。

视觉上高级一点，往往不靠复杂，而靠统一

搜索弹层想做得高级，很多人会先加发光、模糊、投影、动画。其实更重要的是统一感：

1. 输入框和关闭按钮是不是一个体系
2. 结果列表和整体容器有没有相同的圆角语言
3. 阴影是不是只服务于主体，而不是每块都单独打一层
4. 白天和夜晚模式下颜色逻辑是否一致

如果这些基础层级没梳顺，再多效果也只是显得更乱。

搜索胶囊更适合做成“视觉锚点”

对很多内容站来说，搜索弹层打开后，用户第一眼找的不是结果，而是输入框本身。所以搜索胶囊最好成为整个弹层的视觉锚点：

1. 尺寸够明显
2. 对比度够清楚
3. 阴影只集中在主输入区
4. 关闭按钮围绕胶囊布局

这样用户一打开就知道“核心交互在这里”，界面会显得更稳。

结果区别一上来就塞太满

很多搜索弹层一展开，就同时塞：

1. 历史记录
2. 热门搜索
3. 推荐文章
4. 分类标签
5. 最近浏览

结果是视觉负担很重，尤其是移动端，小屏幕里一打开就像挤进一个后台面板。

更适合中小站点的做法通常是：

1. 默认只展示一个轻量提示区
2. 输入后再出现结果列表
3. 热门词或历史记录保持少量

把信息做减法，搜索层反而会显得更高级。

一个更稳的实现顺序

如果你准备重做搜索弹层，我更建议按这个顺序：

1. 先定弹层挂载位置和 fixed 结构
2. 再定输入区、关闭按钮、结果区的布局关系
3. 再补滚动锁定和焦点逻辑
4. 最后才加阴影、过渡和氛围效果

这样做能避免一开始就沉迷细节装饰，结果基础结构不稳，后面越改越乱。

结语

搜索弹层难做，不是因为它是搜索，而是因为它同时承担了“浮层页面”的职责。只要把它当成一个独立交互层去设计，而不是导航里顺手弹出来的一块区域，很多错位、重叠、滚动和适配问题都会少很多。

对内容站来说，搜索入口做稳了，整个站的高级感会比单纯多加几个动画更明显。