根本原因是定位上下文缺失，必须确保input的直接父容器设position: relative，否则absolute下拉列表会相对于body定位；width: 100%受包含块及box-sizing影响，推荐用left: 0; right: 0替代。
为什么 position: absolute 的下拉列表总不贴着输入框底部
根本原因是定位上下文缺失。position: absolute 会向上查找最近的 position: relative 祖先作为参考系；如果没找到，就锚定到 body 或视口，导致 top: 100% 悬在半空。
必须确保 <input> 的**直接父容器**（比如 <div class="search-wrapper">）设置了 <code>position: relative。Flex 容器、Grid 容器也一样——哪怕它本身是 display: flex，也得显式加 position: relative。
常见错误：
-
<div><input></div>—— 外层div没设定位，absolute列表会飘走 - 用
form包裹输入框却忘了给它加position: relative
width: 100% 为啥总是比输入框宽或窄几像素
width: 100% 是相对于包含块（containing block）计算的，不是相对于输入框本身。当父容器有 padding、border，或自身未设 box-sizing: border-box，就会出现偏差。
立即学习“前端免费学习笔记（深入）”；
更可靠的做法是放弃单靠 width: 100%，改用：
-
left: 0; right: 0;—— 强制撑满父容器内容区，不受 padding 影响 - 下拉列表自身必须设
box-sizing: border-box，否则 border/padding 会额外加宽 - 避免给下拉列表设
margin或padding后再用width: 100%，容易横向溢出
响应式缩放时建议框错位或消失怎么办
缩放后错位，往往是因为宽度策略太“刚性”。仅设 width: 100% 在小屏下可能超视口，设固定值又在大屏显得局促。
推荐组合写法：
min-width: 100%; max-width: min(90vw, 480px);
其中 min() 函数在 Chrome 88+、Firefox 79+、Safari 15.4+ 支持；老版 Safari 可回退为 min-width: 280px。
还要注意：
- 输入框若有
padding或border，left: 0; right: 0比width: 100%更稳 - 别依赖
fit-content：Safari 15.4–16.6 存在计算偏差，会导致忽宽忽窄 - 移动端需确保点击区域 ≥ 44px，否则触控不灵敏
如何让建议项文字截断又不撑破容器
单行文本建议项（如邮箱、URL）容易过长，white-space: normal 会换行破坏对齐，white-space: nowrap 又可能横向溢出。
生效前提很具体：
- 建议项元素（如
<div class="suggestion">）需设 <code>display: block或inline-block - 必须有明确宽度约束（如外层用了
left: 0; right: 0） - 加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
特别注意：不要对外层建议容器（如 <ul class="suggestions"></ul>）设 overflow: hidden，否则滚动条会被隐藏，用户无法查看超出可视区的选项。
