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

Question

我有一个使用 HTML 和 CSS 的 2 列布局。在这些列中，我有一个选择菜单，当单击这些列表项之一时将显示该菜单。我需要相对于单击的项目定位此选择菜单，并且不影响它周围元素的布局，就像传统的选择选项菜单一样。但是，我不能使用传统的选择，因为这是一个自动提示输入/菜单。因此，我在其相对定位的父项中为菜单容器使用了绝对定位项。

我想要什么：

我的问题是绝对定位的项目正在破坏，就好像它是列的一部分一样。这违背了我对position: absolute 的理解，但它似乎是within spec。更令人沮丧的是，浏览器按我的意愿显示绝对定位的项目（只要我没有在父级上设置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>

Here is a codepen 用一个例子来说明我的问题。从 HTML 中移除父类以查看预期的绝对定位项（注意，这有时会导致定位不正确）。

Answer 1

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

Answer 2

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

Answer 3

只需将position:relative 设置为ul，并根据需要将子菜单放置在属性边距上。

Answer 4

您是否可以将<li> 设置为position: relative;，并且选择菜单绝对位于<li> 内？ AFAIK 这是实现这种效果的标准方法。

然后：

.selectMenu {
    position: absolute;
    top: /* height of li element */;
    left: 0;
}