精准定位搜索建议列表需设父容器position: relative，列表用position: absolute; top: 100%; left: 0; width: 100%，并确保z-index有效、无overflow: hidden裁剪，建议项用button实现焦点与悬停一致，移动端需防失焦闪退。
怎么让搜索建议列表精准贴在输入框下方
关键不是靠 margin 或猜高度，而是用 position: absolute 配合 position: relative 容器做锚点定位。输入框父容器必须设 position: relative，否则 absolute 会往上逐级找，可能贴到 body 顶上去。
常见错误是只给下拉列表加 position: absolute，却忘了包住 input 的那个 div 没设相对定位——结果列表飘到页面左上角，或者随滚动错位。
- 父容器（比如
<div class="search-box">）必须带position: relative - 建议列表用
position: absolute; top: 100%; left: 0; width: 100%，这样它紧贴输入框底边，且宽度对齐 - 避免用
top: 40px这类固定值，输入框高度变（比如加了 padding 或换字体）就会脱节
为什么建议列表经常被遮挡或显示不全
多数是 z-index 和层叠上下文搞混了。只要父容器触发了新的层叠上下文（比如有 opacity < 1、transform、filter 或 will-change），里面的 z-index 就只在这个小世界里生效，再高也盖不过外面的导航栏。
另一个高频坑：输入框在 overflow: hidden 的容器里（比如轮播图区域、卡片折叠区），建议列表一出来就被裁掉。
立即学习“前端免费学习笔记（深入）”；
- 检查建议列表父容器是否意外触发了层叠上下文；必要时把
z-index提到外层（比如.search-box上） - 确保输入框所在容器没有
overflow: hidden或clip-path - 建议列表加
max-height: 200px; overflow-y: auto，不然匹配项一多就撑爆视口
如何让建议项鼠标悬停和键盘导航视觉一致
纯 CSS 实现焦点同步的关键是别只依赖 :hover，得用 :focus-within 或配合 JS 控制 class。但如果你坚持只用 CSS，最稳的方式是让每个建议项用 <button> 而非 <div>，这样天然支持 :focus 和键盘 Tab 导航。
样式上容易忽略的是 outline 和 focus ring 的重叠问题：Chrome 默认 focus ring 是双线，如果又加了 border，看起来像加粗了两倍。
- 建议项统一用
<button type="button">，语义正确且免 JS 也能响应键盘 - 清掉默认 outline：
button:focus { outline: none; }，再用box-shadow模拟可访问的焦点样式 - 悬停和聚焦状态用同一套背景色，比如
background: #f5f5f5，避免视觉割裂
移动端点击建议项后输入框失焦、键盘闪退怎么办
本质是点击建议项时，输入框先失去焦点（blur），浏览器立刻收起软键盘；等 JS 执行完再 setSelectionRange 或 focus，键盘已经来不及弹了。这不是 CSS 问题，但 CSS 层级会影响修复方式——比如建议列表用了 pointer-events: none，点击就根本不会触发任何事件。
更隐蔽的坑：iOS Safari 对 position: fixed + input 的组合特别敏感，建议列表若用 fixed 定位，在某些机型上会触发强制失焦。
- 确保建议项元素有
pointer-events: auto（默认就是，但检查是否被父级覆盖） - 避免对建议列表或其父容器设
position: fixed；坚持用absolute+ 相对定位锚点 - JS 处理点击时，先
event.preventDefault()，再input.focus()，最后再input.setSelectionRange()
