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

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

<div >
  <h1>logo</h1>
  <ul>
    <li>
      <div >
        <input placeholder="Search"  type="text">
        <div >
          <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

CodePudding user response：

.SearchContainer {
    position: relative;
    ...
}

CodePudding user response：

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;
    overflow: hidden;
    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%;
}

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