子元素高度撑开父元素，搜索建议框布局异常问题求助

开发者阿泽

2026-8-22

解决导航栏搜索建议框撑开容器的问题

核心是让搜索建议框脱离文档流，同时保持相对搜索框的定位，避免影响导航栏布局：

修改后的CSS代码

.search-box {
  position: relative;
  /* 让容器宽度匹配搜索输入框，避免绝对定位的建议框宽度错位 */
  width: fit-content;
}
.nav-search {
  width: 260px;
}
.autocom-box {
  background-color: white;
  color: black;
  width: 100%; /* 继承父容器宽度，和搜索框保持一致 */
  max-height: 280px;
  overflow-y: auto;
  border-radius: 5px;
  /* 关键修改：绝对定位脱离文档流 */
  position: absolute;
  top: calc(100% + 4px); /* 放在搜索框下方，4px为可调整间距 */
  left: 0;
  z-index: 999; /* 确保悬浮在其他元素上方 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 可选：添加阴影增强层级感 */
}
.search-box li {
  list-style: none;
  padding: 8px 12px;
  cursor: default;
  border-radius: 3px;
  width: 100%;
}
.search-box li:hover {
  background: #efefef;
}
.search-btn {
  height: 38px;
  width: 38px;
  line-height: 38px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  cursor: pointer;
  color: black;
  margin-right: 10px;
  border: none;
  background: none;
}