如何防止绝对定位的元素在CSS列中损坏？

Question

我有一个使用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>

这是一个带有示例的Codepen，显示了我的问题。从HTML中删除父类，以按预期查看绝对定位的项目（请注意，这有时会导致定位不正确）。

Answer 1

backface-visibility: hidden在子元素上使用。

Answer 2

我发现使用transform: translate3d(0,0,0);绝对定位的元素可以防止其分栏。