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

Question

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

我想要的：

我的问题是绝对定位的项目正在破坏，就好像它是列的一部分一样。这违背了我对 position: absolute 的所有理解，但它似乎是 within spec。更令人沮丧的是，浏览器显示了我想要的绝对定位项（只要我不在父级上设置 position: relative ），但我需要在父级上设置 position: relative ，或者 select 菜单（作为绝对定位的项目）不会总是显示相邻的相应元素。

我得到的：

我也尝试过使用 flexbox 的类似列的布局，但是有了这个，项目从左到右显示，当我需要它们按顺序从上到下显示时，就像在传统的列式布局中一样.我可以将 flexbox 与 flex-flow: column wrap 一起使用，但这需要我 know/set 容器元素的高度，这是我做不到的。 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 中移除父项 class 以按预期查看绝对定位的项目（请注意，这有时会导致定位不正确）。

Answer 1

您能否将 <li> 设置为 position: relative;，并且 select 菜单绝对位于 <li> 内？据我所知，这是实现此效果的标准方法。

然后：

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

Answer 2

只需将 position:relative 设置为 ul，如果您需要，请将子菜单放置属性。

Answer 3

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

Answer 4

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

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

How can I prevent an absolutely positioned element from breaking within CSS columns?

html

css

css-position

column-count

css-multicolumn-layout