如何让 html 元素覆盖并伸出 CSS“列”

Question

我需要的是基于 2 列的布局，其内容可以动态加载并根据需要均匀分布在尽可能多的空间中。

所以我认为 CSS 列是完美的选择。这是针对上述情况但内容不是纯文本，它实际上是具有潜在下拉菜单的输入元素，为此我使用了 twitter 的 typeahead。

但是这个下拉列表，当然应该被列机制忽略，并且应该覆盖列，甚至可能伸出它。

这是一张图片来说明所需的效果：

我认为嵌套 div 的绝对定位可以做到这一点，但没有运气。没有 JS 有什么办法可以做这种魔术吗？

<fieldset>
    <div class="item">
        <input type="text"/>
        <div class="dropdown"></div>
    </div>
    <div class="item">
        <input type="text"/>
    </div>
    <div class="item">
        <input type="text"/>
    </div>
</fieldset>

fieldset {
  column-count: 2;
  column-gap: 20px;
}

.item {
  position: relative;
  -webkit-column-break-inside: avoid;
}

.dropdown {
  position: absolute;
  height: 200px;
  width: 100px;
  z-index: 10;
}

检查笔： http://codepen.io/anon/pen/ByJXVW

Answer 1

更新：可能你已经让它工作了吗？我刚刚添加了背景颜色，使其可见。

fieldset {
  column-count: 2;
  column-gap: 20px;
  width: 200px;
}

.item {
  position: relative;
  -webkit-column-break-inside: avoid;
}

.ontop {
  position: absolute;
  height: 200px;
  width: 200px;
  z-index: 10;
  background-color:rgba(0,0,0,0.5);
}

<fieldset>
    <div class="item">List Item1         
        <div class="ontop"></div>
    </div>
    <div class="item">List Item2</div>
    <div class="item">List Item3</div>
</fieldset>