如何在input元素下显示搜索结果列表？

Question

我想在输入下的list-group（Bootstrap）中显示搜索结果，我在哪里，hovering my mouse。

如果我在搜索div之后创建一个列表，it starts位于屏幕顶部。

如何在搜索下方定位列表？

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.content {
  font-family: 'Cutive Mono', monospace;
}

.search {
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-weight: 100;
}

<div class="content">

  <div class="search">
    INPUT
  </div>

  <div class="list-group">
    LIST ITEMS
  </div>

</div>

Answer 1

看来你正在使用position:absolute来垂直和水平居中输入。但是，绝对定位会从文档流中删除元素，因此相对于该元素定位另一个元素可能会产生看似意外的结果。

绝对 该元素从正常文档流中删除;没有为页面布局中的元素创建空间。 - position @ MDN

---

一个替代的想法是使用flexible box layout。 .content元素成为“flex容器”，它的两个子元素在其父级中水平和垂直居中。

下面，我使用了Bootstrap flex classes。

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.content {
  height: 100%;
  font-family: 'Cutive Mono', monospace;
}

.search {
  margin: 0 0 1em;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="content d-flex flex-column justify-content-center align-items-center">

  <div class="search">
    <input type="text" placeholder="search">
  </div>

  <ul class="list-group">
    <li class="list-group-item">Test</li>
    <li class="list-group-item">Another Test</li>
    <li class="list-group-item">Sample</li>
    <li class="list-group-item">Another Sample</li>
    <li class="list-group-item">Last one</li>
  </ul>

</div>