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

Question

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

图片 _1 图片 _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

感谢客人，我解决了这个问题

祖先

.w3-panel{
  position: relative;
}

评论Div

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

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

z-index: -1;

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