如何防止可变高度的div移动其他元素

Question

HTML:

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

autocompletediv包含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

此外，我建议你检查这个关于相对与绝对定位的堆栈溢出答案，它有一个非常自然的响应(相对位置与绝对位置？(

这告诉浏览器，任何要定位的东西都应该从文档的正常流程中删除，并将其放入页面上的确切位置。它不会影响之前的元素它或在HTML中的它之后被定位在网页上将受制于其父母的定位，除非你覆盖它。

Answer 2

这是使自动完成div中的项不影响页面上其他元素(在这种情况下是您的按钮(的流动的通用方法。

#autocomplete {
position: relative;
}
#autocomplete > * {
position: absolute;
}

改进此代码的几点意见：

• 不要在css上使用ID(#(。最好坚持使用类名
• 不要使用通配符(*(-最好添加自动补全中存在的项目，这些项目不会显示在问题中。更好的是，将它们全部包裹在另一个元素中，这样你就不必将所有元素单独绝对定位