浮动Div高于内容

Question

我不是CSS专家。每当我认为我理解布局时，就会出现令我困惑的事情。目前，我有以下HTML：

<div>
  <input id="searchQuery" type="text" placeholder="Search..." />
  <br/>

  <div id="searchSuggestions">
    <!-- search suggestions will be dynamically populated -->
  </div>
</div>

<div id="content">
  <!-- Rest of site content goes here -->
</div>

当用户在搜索字段中输入内容时，我会向他们提供搜索建议。我有这个工作。我的问题是，随着建议出现/消失，它会上下推送内容。我希望内容留在原地。我希望搜索建议显示在searchQuery字段下方，但看起来像是内容之上的图层。我必须使用哪些CSS属性来实现这一目标？

感谢你！

Answer 1

您希望搜索父div为{position：relative}，搜索结果子div为{position：absolute}。绝对定位的搜索结果将从常规流中拉出，并放置在相对定位的第一个父div的左上角。

https://developer.mozilla.org/en-US/docs/Web/CSS/position