How can I position my autocomplete box under the search box?

Question

Hello I'm trying to create a custom suggestion box for search box. The parent div is flex box and suggestion box is positioned absolute. but the top and left property of css. It is taking of global page and not parent.

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

You can see in css " suggesetionbox " the top property is targeting complete page not parent div. Can someone suggest how can I append the div correctly under search box.

Thanks

Answer 1

EDIT: First, add position: relative to your .SearchContainer . This makes sure that the dropdown is set on the searchcontainer and not on the whole page. Then, the overflow: hidden needs to be removed from .header ul in order to see the whole dropdown.

Remove the display flex on your suggestionbox class. You can fix the alignment of the options in your topbar with the flex box in your .header ul

 .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;
    }