Как я могу помешать абсолютно позиционированному элементу разбиться в столбцах CSS? ⇐ Html

[Anonymous]

У меня есть макет 2 столбца с использованием HTML и CSS. В этих столбцах у меня есть SelectMenu, который будет отображаться, когда один из этих элементов списка будет нажат. Мне нужно позиционировать этот SelectMenu относительно щелченному элементу и не влиять на макет элементов вокруг него, как традиционное меню опции Select. Тем не менее, я не могу использовать традиционные выборы, так как это самоотверженное вход/меню. So, I am using an absolutely positioned item for the menu container within its relatively positioned parent.

What I want:



Моя проблема в том, что абсолютно позиционированный элемент ломается, как будто он был частью столбцов. Это идет вразрез с всем, что я понимаю, о позиции: Absolute , но кажется, что это в спецификации. Что более расстраивает, так это то, что браузер показывает абсолютно позиционированный элемент, как я намерен (до тех пор, пока я не устанавливаю позицию: относительный на родителе), но мне нужно установить позицию: относительный на родителе или Selectmenu (как абсолютно позиционированный элемент) не всегда покажет примыкающий к своему соответствующему элементу. /> < /p>

Я также попробовал, как колонковый макет с использованием Flexbox, но с этим элементы отображаются слева направо, когда мне нужно, чтобы они были показаны внизу, в порядок, как в традиционном. Я мог бы использовать Flexbox с помощью Flex-Flow: Column wrap , но это потребовало бы, чтобы я узнал/установил высоту элемента контейнера, что я не могу сделать. Столбцы CSS прекрасно обертывают список без необходимости устанавливать высоту. < /P>

Я думаю, что самые простые решения - каким -то фальшивым абсолютным позиционированием или для того, чтобы Glexbox показал элементы в порядке (сверху внизу), не явно установив высоту на контейнере. Оба из которых я попробовал без удовлетворительных результатов. Я открыт для использования решения 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;
}< /code>

• item
• item
• item
• item
• item
• item
• item
• item
• item
• item that shows selectmenu
  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.
• item
• item
• item
• item
• item
• item
• item
• item

< /code>
< /div>
< /div>
< /p>

Вот кодепен с примером, показывающим мою проблему. Снимите родительский класс из HTML, чтобы увидеть абсолютно позиционированный элемент, как предполагалось (обратите внимание, что это приведет к тому, что позиционирование иногда будет неверным).


Подробнее здесь: https://stackoverflow.com/questions/384 ... n-css-colu