如何将HTML元素固定到其初始位置？

Question

在HTML页面中，我有一个搜索栏，在键入事件时，在搜索栏之后会添加一个无序列表。现在，我希望结果覆盖条形图下面的元素，因此它们应保持在同一位置而不是下降。实现此目标的最佳方法是什么？

Image_1 Image_2

第一个是没有文本输入的模板，第二个是带有输入的相同模板。文本输入导致对服务器的ajax查询，该查询以用于构造列表的数据作为响应。我希望该列表能够覆盖该栏下的内容（在此情况下，为最后五个注释，以及其他注释）

我想要google.com的行为（搜索栏的底部被查询的结果覆盖）

Answer 1

要阻止下面的内容移动，您需要从布局流程中删除搜索建议。您可以使用position CSS属性来完成https://developer.mozilla.org/en-US/docs/Web/CSS/position。

具体地说，尝试position: absolute：https://www.w3.org/TR/CSS2/visuren.html#propdef-position

  

绝对放置的盒子将从正常流程中移出。

这意味着通常位于条形下方的元素仍将直接布置在条形下方，而现在不会为添加的搜索建议腾出空间。

Answer 2

谢谢客人，我解决了问题

祖先div

.w3-panel{
  position: relative;
}

评论部门

#commentsDiv{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

因此，commentDiv div将相对于w3面板父div定位，并且不会移动到其他位置。显然，请求的行为是将commentDiv div和resultDiv重叠，因此我添加了

z-index: -1;

指示应该隐藏哪个div，以利于另一个（在这种情况下，commentDiv div将隐藏，因为它的z索引较低（默认值为0）