javascript - 如何固定一个HTML元素到他的初始位置?

标签 javascript html css

在 HTML 页面中,我有一个搜索栏,在 keyup 事件中,在搜索栏之后添加了一个无序列表。现在,我希望结果覆盖栏下方的元素,因此它们应该保持在相同的位置而不是向下。实现这一目标的最佳方法是什么?

Image_1 Image_2

第一个是没有文本输入的模板,第二个是有输入的相同模板。文本输入导致对服务器的 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/

相关文章:

javascript - 通过将顶部刻度保持在 d3 中的条上方来限制 Y 轴刻度数

jquery - 使用 CSS 或 JQUERY 识别列表项的内容是否以链接开头

javascript - 在一个网页上的多个图像上使用叠加层

javascript - 更快地替换所有 dom 元素中的文本的方法?

javascript - javascript中的继承模式

javascript - 是否可以将 "this.src"发送到 js 函数?

javascript - JQueryUI 窗口未覆盖所有内容元素

javascript - 我们如何将两个响应式和卡住的图片与 z-index 放在一起?

html - 在 CSS 中选择 "child + child"

javascript - 用es6写书架模型