我怎樣才能 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;
    }