下拉列表未贴合搜索框底部是因为父容器缺少position: relative；宽度异常源于width: 100%受包含块及box-sizing影响；z-index失效常因层叠上下文隔离；:focus-within在portal模式下不生效，需结合js状态控制显隐。
下拉列表为什么没贴着搜索框底部？
常见现象是 position: absolute 的下拉容器明明设了 top: 100%，却悬在半空或偏移。根本原因是：父容器没设 position: relative，导致绝对定位向上逐级找最近的定位祖先，最终相对 body 或视口定位。
必须确保搜索框（即 <input> 的直接父元素）有 position: relative，否则 top: 100% 不会紧贴它底部。
- 错误写法：
<div><input></div>—— 外层div缺失定位上下文 - 正确写法：
<div style="position: relative"><input></div> - 如果用 Flex 布局包裹搜索框，也要给该容器加
position: relative
Width:100% 下拉列表为啥比输入框宽或窄？
width: 100% 是相对于其**包含块（containing block）** 计算的。当父容器有 padding、border，或自身是 inline 元素时，width: 100% 会继承父容器的 content-box 宽度，但下拉列表若未设 box-sizing: border-box，它的 border/padding 会额外撑开，导致实际宽度超限。
更隐蔽的问题是：如果父容器设置了 display: inline-block 或存在横向 margin，也可能干扰 100% 计算。
- 必加样式：
box-sizing: border-box到下拉列表本身 - 推荐写法：
width: 100%; left: 0; right: 0;（双赋值可强制撑满，且不受父 padding 影响） - 避免对下拉列表设
margin或padding后再用width: 100%，容易溢出
z-index 失效导致下拉被遮挡怎么办？
即使设了 z-index: 999，下拉列表仍可能被导航栏、弹窗或其它 position: relative 元素盖住。这不是 z-index 数值不够大，而是层叠上下文（stacking context）被意外创建。
只要父容器有 opacity 、<code>transform、filter 或 will-change，就会新建一个层叠上下文，把子元素的 z-index 锁死在这个局部范围内。
- 检查搜索框父容器是否用了
transform: translateZ(0)或opacity: 0.99类似 hack - 下拉列表的 z-index 必须比其**最近的层叠上下文根元素**的 z-index 高才有意义
- 最稳妥做法：把下拉列表挂到
body下（用 Portal 模式），彻底脱离父层叠上下文
输入框获得焦点时下拉不显示？
很多人用 :focus-within 控制下拉显隐，但若下拉列表不在搜索框父容器内部（比如用 JS 动态 append 到 body），:focus-within 就失效了 —— 它只作用于**后代元素**。
另一个常见疏漏：JS 中监听 input 事件后，没判断当前是否有匹配联想词，就无条件显示下拉，结果空列表闪现又消失，造成闪烁或布局抖动。
- 显示逻辑应基于：输入框聚焦 且 联想数据非空
- 隐藏时机要区分：失焦（blur）、点击外部、按 Esc 键 —— 三者缺一不可
- 用
pointer-events: none+opacity: 0替代display: none，方便做淡入动画且不破坏 DOM 流
真正难的不是写对 position: absolute 和 width: 100%，而是所有相关元素的定位上下文、盒模型、层叠顺序、交互状态必须同步对齐——少一个约束，视觉或交互就出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
