我有一个使用 HTML 和 CSS 的 2 列布局。在这些列中，我有一个选择菜单，当单击这些列表项之一时将显示该菜单。我需要相对于单击的项目定位此选择菜单，并且不影响其周围元素的布局，就像传统的选择选项菜单一样。但是，我不能使用传统的选择，因为这是一个自动提示输入/菜单。因此，我在其相对定位的父项中为菜单容器使用了绝对定位的项。
我想要的是：
我的问题是绝对定位的项目正在破坏，就好像它是列的一部分一样。这违背了我所了解的一切position: absolute，但它似乎在规范之内。更郁闷的是，浏览器按我的意愿显示绝对定位项（只要我不设置position: relative在父项上），但我需要设置position: relative在父项上，或者选择菜单（作为绝对定位项）不会总是显示相邻的相应元素。
我得到什么：
我还尝试了使用 flexbox 的类似列的布局，但是这样，项目从左到右显示，当我需要它们按顺序从上到下显示时，就像在传统的列式布局中一样。我可以将 flexbox 与 一起使用flex-flow: column wrap，但这需要我知道/设置容器元素的高度，这是我做不到的。CSS 列很好地包裹了列表，而无需设置高度。
我认为最简单的解决方案是以某种方式伪造绝对定位或让 flexbox 按顺序（从上到下）显示项目，而无需在容器上明确设置高度。这两种我都试过了，都没有令人满意的结果。我对使用 JavaScript 解决方案持开放态度，但我正在尽力避免它并仅使用 CSS 解决这个问题。
.columns-two {
column-count: 2;
column-width: 300px;
-moz-column-count: 2;
-moz-column-width: 300px;
}
.parent {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
position: relative;
}
.highlight {
background-color: #FFF8DC;
}
.absolute-element {
width: 200px;
position: absolute;
background: #ffffff;
border: 1px solid #cccccc;
padding: 15px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}<ul class="columns-two">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li class="parent highlight">item that shows selectmenu
<div class="absolute-element">This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element.This is an absolute
element. This is an absolute element. This is an absolute element. This is an absolute element.</div>
</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>这是一个带有示例的代码笔，显示了我的问题。从 HTML 中删除父类以查看预期的绝对定位项（请注意，这有时会导致定位不正确）。