在 HTML 页面中,我有一个搜索栏,在 keyup 事件中,在搜索栏之后添加了一个无序列表。现在,我希望结果覆盖栏下方的元素,因此它们应该保持在相同的位置而不是向下。实现这一目标的最佳方法是什么?
第一个是没有文本输入的模板,第二个是有输入的相同模板。文本输入导致对服务器的 ajax 查询,该服务器使用用于构建列表的数据进行响应。我希望此列表确实涵盖栏下的内容(在本例中为最后五条评论和其他评论)
我想要 google.com 的行为(搜索栏后的底部被查询结果覆盖)
最佳答案
要防止下面的内容移动,您需要从布局流中删除搜索建议。您可以使用 position
CSS 属性来执行此操作 https://developer.mozilla.org/en-US/docs/Web/CSS/position .
具体来说,尝试position: absolute
: https://www.w3.org/TR/CSS2/visuren.html#propdef-position
Absolutely positioned boxes are taken out of the normal flow.
这意味着通常位于栏下方的元素仍将直接布置在栏下方,现在不会为添加的搜索建议腾出空间。
关于javascript - 如何固定一个HTML元素到他的初始位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56227320/