如何将搜索建议框（suggestion box）正确定位在搜索框下方？

问题的核心是：绝对定位元素的定位基准是最近的设置了非static定位的父元素，你的.SearchContainer默认是position: static（CSS默认值），所以.suggesetionbox会向上查找直到全局页面作为基准。

只需两步修改即可解决：

1. 给父容器设置相对定位 #

给.SearchContainer添加position: relative;，这样它就会成为内部绝对定位元素的定位基准：

.SearchContainer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 添加这一行 */
}

2. 调整建议框的定位属性 #

把.suggesetionbox的top: 50px改为top: 100%，让它刚好贴在父容器底部（即搜索框下方），同时设置left: 0实现左对齐，还可以调整宽度让它和搜索框匹配：

.suggesetionbox {
    position: absolute;
    top: 100%; /* 相对于父容器高度定位到底部 */
    left: 0; /* 与父容器左对齐 */
    width: 100%; /* 和搜索框同宽 */
    background-color: #fff;
    border: 1px solid;
    margin-top: 2px; /* 可选：和搜索框留一点间距 */
    box-sizing: border-box; /* 确保边框不会超出父容器宽度 */
}

修改后的完整代码 #

CSS代码 #

.header ul {
    list-style-type: none;
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-right: 25px;
}

.header li {
    float: right;
}

.header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.header{
    display: flex;
    background-color: #333;
}

.suggesetionbox {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid;
    margin-top: 2px;
    box-sizing: border-box;
}

.SearchContainer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

input{
    border-radius: 10px;
    width: 100%; /* 可选：让搜索框占满父容器宽度 */
    padding: 8px 12px;
    box-sizing: border-box;
}

HTML代码 #

<div class="header">
  <h1>logo</h1>
  <ul>
    <li>
      <div class="SearchContainer">
        <input placeholder="Search" class="search" type="text">
        <div class="suggesetionbox">
          <p>item1</p><p>item2</p>
        </div>
      </div>
    </li>
    <li>
      <a href="/">Home</a>
    </li>
    <li> <a href="/login">Login</a></li>
  </ul>
</div>

额外说明 #

• box-sizing: border-box是为了确保元素的内边距和边框不会超出设置的宽度，避免布局错位。
• 如果需要建议框和搜索框宽度不同，可以调整.suggesetionbox的width值，比如固定宽度150px，同时用left: 50%; transform: translateX(-50%);让它居中对齐父容器。

内容的提问来源于stack exchange，提问作者shubham kakade