重叠下拉列表

Question

我想在一个包含高度为0的包装div中嵌入一个dropdown div，这样它无论是否显示它都不占用空间，当它显示时，它会覆盖下面的内容。假设下拉元素是一个内容为Foo的div。我做了类似的事情：

HTML

<div class="dropdown_wrapper">
  <div id="dropdown_content">Foo</div>
</div>

CSS

.dropdown_wrapper{
  height: 0;
  overflow: visible;
}

通过Javascript，我在#dropdown_content和display: block之间切换了display: none的样式。当它是前者时，我希望显示内容，但它实际上没有显示，隐藏在具有0高度的包装div中。

如何解决这个问题？

Answer 1

您可能不希望包装器使用文档中的任何空格。使用它作为锚点使用

position: absolute;
overflow: visible;

包装器上的

。这样内容就会设置它自己的边界框。

其余的似乎按照你的意图行事。检查此FIDDLE