我怎样才能 position 我的搜索框下的自动完成框？

Question

您好，我正在尝试为搜索框创建自定义建议框。 父 div 是弹性框，建议框是绝对定位的。 但是 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: 50px; width: 150px; background-color: #fff; border: 1px solid; }.SearchContainer { width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; } input{ border-radius: 10px; }

 <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>

您可以在 css 中看到“ suggesetionbox ”的顶部属性是针对完整页面而不是父 div。 有人可以建议我如何在搜索框下正确地显示 append 的 div。

谢谢

Answer 1

编辑：首先，添加position: relative对于您的.SearchContainer 。 这确保下拉列表设置在搜索容器上而不是整个页面上。 然后，需要从.header ul中删除overflow: hidden才能看到整个下拉列表。

删除建议框 class 上的显示 flex。您可以使用.header ul中的 flex 框修复顶部栏中选项的 alignment

 .header ul { list-style-type: none; display: flex; width: 100%; justify-content: flex-end; margin-right: 25px; align-items: center; }.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; width: 150px; background-color: #fff; border: 1px solid; }.SearchContainer { width: 100%; position: relative; }

 <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>

Answer 2

.SearchContainer {
    position: relative;
    ...
}

Answer 3

.suggesetionbox {
        position: absolute;
        border: 1px solid #d4d4d4;
        border-bottom: none;
        border-top: none;
        z-index: 99;
        height: 100%;
        /*position the autocomplete items to be the same width as the container:*/
        top: 100%;
        left: 0;
        right: 0;
    }

    .SearchContainer {
        position: relative;
        display: inline-block;
    }