根本原因是父容器未设 position: relative；absolute 元素定位依赖最近已定位祖先，否则会上溯至 body；需为父容器设 relative，并用 top: 100%、left: 0; right: 0; 等确保贴合与宽度适配。
为什么 position: absolute 的补全列表没贴住搜索框？
根本原因是父容器没设 position: relative。absolute 是相对于最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky）来定位的。如果父级（比如包裹 input 和下拉列表的 div）是默认的 static，那列表就会往上找，甚至相对于 body 定位，飘走。
实操建议：
- 给搜索框的直接父容器加
position: relative - 确保补全列表（如
ul.dropdown）是该父容器的子元素，且设position: absolute - 用
top: 100%让列表紧贴输入框底部，而不是靠top: 0或估算像素值
width: 100% 不生效？检查这些常见干扰项
width: 100% 在 absolute 元素上表现异常，往往是因为它在计算宽度时参考的是「包含块」——而这个包含块可能不是你预期的父容器宽度。尤其当父容器有 padding、border，或列表本身有默认 margin/padding 时，视觉上就会窄一截或溢出。
实操建议：
- 给补全列表加
box-sizing: border-box，避免内边距影响宽度计算 - 显式清除默认样式：
margin: 0; padding: 0; - 如果父容器有
padding，不要依赖width: 100%，改用left: 0; right: 0;—— 这样更可靠，且自动适应父容器内边距 - 避免对
ul或div设置display: inline-block，它会破坏100%宽度行为
输入框聚焦时列表不显示？别只靠 :focus
CSS 的 :focus 伪类只能控制输入框自身，无法直接控制兄弟元素（如下拉列表）。想让列表随输入框聚焦出现，必须借助 JavaScript 控制类名，或把列表作为 input 的子元素（不推荐语义混乱），或用更健壮的结构：
实操建议：
- HTML 结构保持
input和ul同级，都包在position: relative的容器里 - 用 JS 监听
input的focus和blur，动态添加/移除.show类 - CSS 写成
.search-container .dropdown.show { display: block; }，而非仅靠input:focus + ul—— 后者在用户点击列表项时会因失焦立即隐藏 - 加个
setTimeout延迟隐藏（比如 200ms），给用户留出点击选项的时间
移动端适配和 z-index 容易被忽略的点
在 iOS Safari 或 Android Chrome 上，absolute 补全列表常被软键盘顶起、错位，或被其他元素（如 fixed 导航栏）遮挡。这不是 CSS 写错了，而是层叠上下文和视口缩放导致的。
实操建议：
- 给补全列表设足够高的
z-index（如z-index: 1000），并确认其父容器没有创建新的层叠上下文（比如意外加了opacity: 0.99或transform） - 避免在父容器上用
transform，它会创建新层叠上下文，导致z-index失效 - 移动端可加
min-width: 100%防止小屏下列表被压缩变形 - 测试时真机打开软键盘，观察是否触发
resize或scroll，必要时用 JS 动态调整top值
absolute 和 100%，而是忘记父容器的定位上下文、忽略默认盒模型、以及在交互逻辑里没处理好焦点切换的时机。这几个点漏掉一个，补全列表就大概率“看起来写了，但就是不对”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
