如何防止变高分区移动其他元素？

Question

HTML：

<div id="autocomplete" hidden></div>
<input type = "button" id = "search" value = "Search">

自动完成div保存由jQuery生成的各种输入标记。当创建输入标记时，它们会将按钮向下移动，以适应自动完成的内容。我想做的是让自动完成的div覆盖在按钮的顶部，而不是移动按钮。

我试过使用z索引，但似乎只有在HTML中的按钮之后放置了自动完成，使用负边距将自动完成备份。我不喜欢这个解决方案，因为从其他屏幕大小看，它会搞砸。

还有别的办法吗？

Answer 1

我认为您必须使用absolute定位来将按钮保留在插入元素的上方。

你可以这样做：

​

$('#autocomplete').append($('<div>').text('WOW1'))
$('#autocomplete').append($('<div>').text('WOW2'))
$('#autocomplete').append($('<div>').text('WOW3'))
$('#autocomplete').append($('<div>').text('WOW4'))

#container {
  position: relative;
}

#search {
 position: absolute;
 top: 0;
}

#autocomplete {
  padding-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="autocomplete" ></div>
  <input type = "button" id = "search" value = "Search">
</div>

​

编辑：

下面是一个查看CSS位置如何工作的链接：https://developer.mozilla.org/en-US/docs/Web/CSS/position

另外，我建议您检查这个堆栈溢出的答案，相对于绝对位置，它有一个非常自然的响应(Position Relative vs Absolute?)

--这告诉浏览器，应该从文档的正常流中删除要定位的内容，并将其放置在页面上的确切位置。它不会影响在它之前或之后的元素在网页上的定位方式，但是，除非您重写它，否则它将受到它的父母位置的限制。

Answer 2

这是一种通用方法，使自动完成div中的项不影响页面上其他元素的流(本例中为您的按钮)。

#autocomplete {
  position: relative;
}

#autocomplete > * {
  position: absolute;
}

要改进这段代码，请注意几点：

• 不对您的css使用ID (#)。最好坚持类名。
• 不使用通配符(*) -最好添加将存在于自动完成中的项，这些项在问题中没有显示。更好的方法是，将它们都封装在另一个元素中，这样您就不必单独地对它们进行绝对定位，