搜索建议列表精准对齐的关键是父容器设 position: relative，下拉列表用 position: absolute; top: 100%; left: 0; width: 100%，阴影加在容器而非 input 或 li 上，hover 仅改背景或边框，移动端确保点击区域≥44px、blur-radius≤8px 并启用 gpu 加速。
如何让搜索建议列表既“浮起来”又精准对齐输入框
关键不是加 box-shadow，而是先确保定位基准正确。常见错误是给 input 加了 position: relative，但忘了建议列表（比如 ul.dropdown）必须用 position: absolute 且父容器是那个 relative 元素——否则它会相对于 body 或最近的定位祖先偏移，导致错位。
- 建议容器（如
div.search-wrapper）必须设position: relative，input和下拉列表都放里面 - 下拉列表本身用
position: absolute; top: 100%; left: 0; width: 100%，这样它紧贴在输入框下方，不随滚动错位 - 阴影要加在列表上，不是
input上：例如box-shadow: 0 4px 12px rgba(0,0,0,0.1)，避免模糊半径过大导致边缘虚化看不清文字
为什么 hover 高亮项 + 阴影一起用反而显得乱
因为默认的 :hover 只改背景色，而阴影是全局叠加的，两者叠加后视觉重心冲突。更糟的是，如果给每个 li 单独加 box-shadow，它们会互相重叠、边缘打架，尤其在圆角+阴影组合时。
- 只给整个下拉容器加一层统一阴影，不要给单个
li加 -
li:hover仅用背景色或边框变化，比如background-color: #f5f5f5或border-left: 3px solid #007bff - 如果真要强化 hover 层级感，可用
transform: translateY(-1px)配合过渡，比加阴影更轻量、更可控
移动端点击区域小、阴影糊成一片？检查这三点
阴影在高 DPR 屏幕（如 iPhone、MacBook）上容易因像素插值变糊，加上触摸目标太小，用户点不中还觉得“卡顿”。这不是 CSS 写错了，是响应式细节没跟上。
- 用
min-height和padding保证每项点击区域 ≥ 44px，例如li { padding: 12px 16px; min-height: 44px; } - 阴影的
blur-radius别超过 8px，移动端推荐box-shadow: 0 2px 6px rgba(0,0,0,0.08) - 加
will-change: transform到下拉容器上，能触发 GPU 加速，减少滚动时阴影重绘的卡顿感
怎么用 CSS 选中“当前有建议弹出”的状态
CSS 无法检测一个元素是否“可见”或“有阴影”，所以不能靠 box-shadow 值反向选择。必须由 JS 控制显隐时，同步加/删类名，再用这个类名做样式联动。
立即学习“前端免费学习笔记（深入）”；
- JS 显示建议时加
class="has-suggestions"到input或外层容器 - 然后写
.search-wrapper.has-suggestions input { box-shadow: 0 0 0 2px #007bff; }实现聚焦态强调 - 别用
[style*="box-shadow"]这类属性选择器——不可靠，且破坏可维护性
最易被忽略的一点：阴影的 z-index 必须高于页面其他浮动元素（比如固定导航栏），否则建议列表会被遮住。设 z-index: 1000 是稳妥做法，但得确认它没和 modal、toast 的层级冲突。
