本文详解如何通过 css 正确实现下拉列表（`
- `）紧贴输入框底部对齐，解决因 flex 布局与绝对定位冲突导致的偏移问题，涵盖结构优化、定位修复及可访问性增强技巧。
在您提供的示例中，.combobox-options（即下拉
- ）未能准确出现在输入框正下方，根本原因在于：.combobox-wrapper 使用了 display: flex; flex-direction: row，但
- 是直接子元素，却被设为 position: absolute——此时它的 top: calc(100% + 0.25em) 是相对于最近的「定位上下文」（即 .combobox-wrapper）计算的，而该容器高度由 align-items: center 拉伸/居中后实际内容高度决定，并非输入框底部位置。更关键的是：flex-direction: row 下，100% 高度参考的是容器自身高度（含 label 和 input 的总高度），而非 input 元素本身，导致 top: 100% 错误地从整个 wrapper 顶部起算，而非 input 底部。
✅ 正确解法分三步：
1. 重构 html 结构：隔离定位上下文
将 和
- Belize
- Benin
2. 更新 css：精准控制定位与布局
- 移除 .combobox-wrapper 中冗余的 display: flex; flex-direction: row（它干扰垂直流式定位）；
- 改用 flex-direction: column 并确保 label/input 容器自然堆叠；
- 关键：为 .combobox-input-container 设置 position: relative，使内部
- 的 absolute 定位以此为锚点；
-
- 使用 top: 100%（即紧贴父容器底边），并添加 left: 0; width: 100% 实现水平对齐。
.combobox-wrapper { position: relative; width: 20em; min-height: 1.5em; display: flex; flex-direction: column; /* ✅ 垂直排列 label + input 容器 */ } .combobox-label { padding-top: 0.5em; color: #4d4d4d; } .combobox-input-container { position: relative; /* ✅ 创建新的定位上下文 */ width: 100%; } .combobox-input { font-size: 16px; height: 30px; padding: 4px 10px; width: 100%; /* ✅ 占满容器宽度，便于 ul 对齐 */ border: 1px solid #828995; border-radius: 4px; } .combobox-options { position: absolute; top: 100%; /* ✅ 紧贴 input 底部 */ left: 0; width: 100%; /* ✅ 与 input 宽度一致 */ margin: 0; padding: 0; list-style: none; max-height: 15em; overflow-y: auto; border: 1px solid #828995; border-radius: 4px; background-color: white; z-index: 100; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .combobox-option { padding: 0.25em 0.5em; cursor: pointer; border-bottom: 1px solid #f0f0f0; } .combobox-option:last-child { border-bottom: none; }3. 注意事项与增强建议
- 可访问性：保留 role=”listbox” 和 role=”option”，并确保键盘导航（↑/↓）与 Enter 选择逻辑可用；
- 响应式：若需支持小屏幕，可为 .combobox-options 添加 min-width: max-content 防止文字截断；
- 性能：大量选项时，考虑虚拟滚动（Virtual Scrolling）替代 overflow-y: auto；
- 浏览器兼容性：calc(100% + 0.25em) 在旧版 safari 中偶有渲染偏差，top: 100% + margin-top: 0.25em 更稳妥。
✨ 总结：绝对定位元素必须置于正确的定位上下文中。当目标是“相对于某个兄弟元素定位”时，切勿让其与目标同级并依赖父容器的 flex 流式高度；而应包裹目标元素，创建专属 position: relative 容器——这是 ui 组件（如 select、Combobox、Tooltip）实现精准定位的黄金实践。