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

Question

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

此预览应在搜索栏下方可见。但是，这是当前状态，这当然不是我想要的：

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

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

这应该是这样的：

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

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

标签： htmlcss

Answer 1

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

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