如何防止绝对定位的元素在CSS列中断开？
我有一个使用HTML和CSS的2列布局。在这些列中，我有一个selectmenu，当单击其中一个列表项时将显示该菜单。我需要相对于点击的项目定位这个selectmenu，并且不影响它周围元素的布局，就像传统的select选项菜单一样。但是，我不能使用传统的选择，因为这是一个自动建议的输入/菜单。因此，我在菜单容器的相对定位父项中使用了一个绝对定位项。
我想要的：
我的问题是，绝对定位的项目正在断开，就像它是列的一部分一样。这与我对position: absolute的理解背道而驰，但它似乎就是within spec。更令人沮丧的是，浏览器显示了我想要的绝对定位的项目(只要我没有在父级上设置position: relative )，但我需要在父级上设置position: relative，否则selectmenu (作为绝对定位的项目)不会总是显示相邻的相应元素。
我得到了什么：
我还尝试了使用flexbox的列式布局，但使用这种布局时，当我需要它们按从上到下的顺序显示时，项从左到右显示，就像在传统的列式布局中一样。我可以在flex-flow: column wrap中使用flexbox，但这需要我知道/设置容器元素的高度，这是我做不到的。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中删除父类，以便按预期查看绝对定位的项(请注意，这有时会导致定位不正确)。
回答 4
Stack Overflow用户
发布于 2019-09-17 22:48:39
我发现在绝对定位的元素上使用transform: translate3d(0,0,0);可以防止它的换行。
Stack Overflow用户
发布于 2018-12-06 04:36:38
对子元素使用backface-visibility: hidden。
Stack Overflow用户
发布于 2016-07-20 00:19:30
您是否能够在select菜单完全位于<li>内部的情况下将<li>设置为position: relative;？AFAIK这是实现此效果的标准方法。
然后：
.selectMenu {
position: absolute;
top: /* height of li element */;
left: 0;
}https://stackoverflow.com/questions/38463687
复制相似问题