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

Question

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

我想要的是什么：

我的问题是绝对定位的项目正在破碎，就像它是列的一部分一样。这违反了我对position: absolute所理解的所有内容，但它似乎是within spec。更令人沮丧的是，浏览器显示了我想要的绝对定位项（只要我没有在父项上设置position: relative），但我需要在父项上设置position: relative，或者selectmenu（作为一个绝对定位的项目）并不总是显示与其相应的元素相邻。

我得到了什么：

我还尝试使用flexbox进行类似列的布局，但是这样，当我需要从上到下显示项目时，这些项目按照传统的圆柱布局顺序显示。我可以将flexbox与flex-flow: column wrap一起使用，但这需要我知道/设置容器元素的高度，这是我无法做到的。 CSS列可以很好地包装列表，而无需设置高度。

我认为最简单的解决方案是以某种方式伪造绝对定位或让flexbox按顺序显示项目（从上到下），而无需在容器上明确设置高度。我试过的两个都没有令人满意的结果。我愿意使用javascript解决方案，但我正在尽力避免它并仅用CSS解决这个问题。

Here is a codepen以示例显示我的问题。从HTML中删除父类以查看绝对定位的项目（请注意，这将导致定位有时不正确）。

Answer 1

您是否可以将public partial class CourierDeliveringEnemyReport : Form { public static string Label1 { get; set; } public static string Label2 { get; set; } public static string Label3 { get; set; } public static string Label4 { get; set; } public static string Label5 { get; set; } public string Label6 { get; set; } public CourierDeliveringEnemyReport() { InitializeComponent(); UpdateLabels(); // this will clear all labels except Label6 } public void UpdateLabels() { label1.Text = Label1; label2.Text = Label2; label3.Text = Label3; label4.Text = Label4; label5.Text = Label5; label6.Text = "This is a test!"; } CourierDeliveringEnemyReport dlg = new CourierDeliveringEnemyReport(); CourierDeliveringEnemyReport.Label1 = "Report from " + BlueArmy[GameEventList[i].ObservingUnit].Name; ; string temp2 = "Enemy unit (" + RedArmy[GameEventList[i].Unit].Name + ") observed!"; CourierDeliveringEnemyReport.Label2 = temp2; string temp3 = "This intelligence is " + RedArmy[GameEventList[i].Unit].LastTimeObservedByEnemy + " minutes old."; CourierDeliveringEnemyReport.Label3 = temp3; CourierDeliveringEnemyReport.UpdateLabels(); 设置为<li>并将选择菜单设置在position: relative;内？ AFAIK这是实现这种效果的标准方法。

然后：

<li>

Answer 2

在子元素上使用ns。

Answer 3

我发现在绝对定位的元素上使用Debug Test File可以防止其列中断。

Answer 4

只需将position:relative设置为ul，然后根据需要使用属性边距定位子菜单。