[英]How can I position my autocomplete box under the search box?
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.父 div 是弹性框,建议框是绝对定位的。 but the top and left property of css. It is taking of global page and not parent.但是 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>
You can see in css " suggesetionbox " the top property is targeting complete page not parent div.您可以在 css 中看到“ suggesetionbox ”的顶部属性是针对完整页面而不是父 div。 Can someone suggest how can I append the div correctly under search box.有人可以建议我如何在搜索框下正确地显示 append 的 div。
Thanks谢谢
EDIT: First, add position: relative
to your .SearchContainer
.编辑:首先,添加position: relative
对于您的.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.然后,需要从.header ul
中删除overflow: hidden
才能看到整个下拉列表。
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
删除建议框 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>
.SearchContainer {
position: relative;
...
}
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.