html - 如何让 html 元素覆盖并超出 CSS "column"

Question

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

所以我认为 CSS 列是最合适的。它适用于上述情况，但内容不是纯文本，它实际上是具有潜在下拉菜单的输入元素，为此我使用了 Twitter 的提前输入。

但是这个下拉列表当然应该被列机制忽略，并且应该覆盖在列上，甚至可能会突出显示。

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

我假设嵌套 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>