如何让下拉菜单与上方输入框同宽且展开时覆盖下方元素（不使用相对定位）？

阿华AIGC实验室

2026-4-14

嘿，我刚好碰到过一模一样的问题！你纠结的核心就是找个能脱离文档流（不挤下面元素）又能和输入框精准对齐宽度的定位方式——绝对定位（position: absolute）就是完美的解决方案，不用再在relative和fixed之间纠结啦！

解决思路

给输入框和下拉菜单套一个父容器，设置position: relative，作为下拉菜单定位的参考基准。
把下拉菜单的定位改成absolute：它会脱离文档流（不会影响下方元素的布局），同时可以基于父容器的尺寸来匹配输入框的宽度。
调整细节样式，确保宽度计算精准、下拉菜单能覆盖其他元素。

修改后的完整代码

HTML（新增父容器）

<div class="input-wrapper">
  <input class="signininput"  type="text" id="bizcategory" name="bizcategory" placeholder="" maxlength="255" onblur="this.value=removeSpaces(this.value);">
  <div class="list-container" id="myList">
    <ul style="list-style: none;">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
    </ul>
  </div>
</div>

CSS（关键样式调整）

/* 新增父容器：作为下拉菜单的定位基准，统一宽度 */
.input-wrapper {
  position: relative;
  width: 75%; /* 和你原来设置的输入框宽度一致 */
}

.signininput {
  height: 40px;
  width: 100%; /* 现在输入框占满父容器宽度，后续改宽度只需要动父容器 */
  box-sizing: border-box;
}

.list-container {
  display: none;
  position: absolute; /* 改成绝对定位，脱离文档流 */
  top: 100%; /* 刚好贴在输入框底部 */
  left: 0;
  width: 100%; /* 和父容器同宽，完美匹配输入框 */
  border: 1px solid #ccc;
  background-color: white;
  z-index: 100; /* 确保下拉菜单在最上层，覆盖下方元素 */
  box-sizing: border-box; /* 避免边框/内边距撑宽容器 */
}

.list-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* 列表占满下拉菜单宽度 */
}

.list-container li {
  padding: 5px;
}

.list-container li:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

JavaScript（无需修改，保持原逻辑）

const input = document.getElementById("bizcategory");
const listContainer = document.getElementById("myList");

const words = ['option5', 'option6', 'option7', 'option8',
  'option9', 'option10', 'option11'
];

for (let i = 0; i < words.length; i++) {
  const newItem = document.createElement("li");
  newItem.textContent = words[i];
  newItem.style.listStyle = "none";
  listContainer.appendChild(newItem);
}

const listItems = listContainer.querySelectorAll("li");

input.addEventListener("focus", () => {
  listContainer.style.display = "block";
})

input.addEventListener("blur", () => {
  setTimeout(() => {
    listContainer.style.display = "none";
  }, 200);
});

listItems.forEach(i => i.addEventListener("click", function() {
  input.value = i.textContent;
  listContainer.style.display = "none";
}));