html - 如何在 CSS 中创建一个超出父级限制但不调整父级 div 大小的 div？

Question

所以现在我正在尝试实现某种带有预览的搜索栏，它会在用户输入时显示结果。

此预览应该在搜索栏下方可见。然而，这是目前的状态，这肯定不是我想要的:

如您所见，下方白色内容上方有一个黑色导航栏。导航栏的高度应仅与搜索字段旁边的蓝色按钮一样高。

所以，我想做的是，使用预览框并确保父 div 不会扩展到预览下拉列表所需的大小，而是让预览 div 溢出到下面的白色内容部分。

它应该是这样的:

考虑到我用这个创建了上面的图片，我最初的想法是用 position: absolute 附加预览 div 并用 JavaScript 动态定位它，但这并不完全是我在寻找。在这种情况下，我真的很喜欢这个问题的纯 CSS 解决方案。

有什么可以在这里工作的吗？

Answer 1

好吧，忘了这个。在发帖之前，我应该多花些时间思考一下。

解决方案是简单地用负边距底部装饰 div。