/ / Jak mogę zapobiec łamaniu absolutnie pozycjonowanego elementu w kolumnach CSS? - html, css, css3, pozycja css, liczba kolumn

Jak mogę zapobiec łamaniu absolutnie pozycjonowanego elementu w kolumnach CSS? - html, css, css3, pozycja css, liczba kolumn

Mam układ 2 kolumn przy użyciu HTML i CSS. Wewnątrz tych kolumn mam menu wyboru, które będzie wyświetlane po kliknięciu jednego z tych elementów listy. Muszę ustawić to menu wyboru względem klikniętego elementu i nie wpływać na układ elementów wokół niego, tak jak tradycyjne menu opcji wyboru. Jednak nie mogę używać tradycyjnych wyborów, ponieważ jest to autosugestowane wejście / menu. Tak więc używam pozycji pozycjonowanej absolutnie dla kontenera menu w jego względnie pozycjonowanym obiekcie nadrzędnym.

Czego chcę: lista z absolutnie pozycjonowanym dzieckiem w układzie kolumnowym

Mój problem polega na tym, że pozycja pozycjonowana absolutnie pęka tak, jakby była częścią kolumn. To sprzeciwia się wszystkim, co rozumiem position: absolute, ale wygląda na to, że tak w ramach spec. Jeszcze bardziej frustrujące jest to, że przeglądarka pokazuje pozycję pozycjonowania absolutnie zgodnie z moją wolą (o ile nie ustawiam position: relative na rodzica), ale muszę ustawić position: relative na rodzica, lub menu wyboru (jako pozycja pozycjonowana absolutnie) nie zawsze będzie pokazywać sąsiadujące z nim odpowiednie elementy.

Co dostaję: wprowadź opis obrazu tutaj

Próbowałem również układ podobny do kolumny, używającużywając flexbox, ale z tym, elementy są pokazane od lewej do prawej, kiedy trzeba je pokazać od góry do dołu, w kolejności, jak w tradycyjnym układzie kolumnowym. Mógłbym używać Flexbox z flex-flow: column wrap, ale to wymagałoby ode mnie poznania / ustawienia wysokości elementu kontenera, czego nie mogę zrobić. Kolumny CSS ładnie owijają listę bez konieczności ustawiania wysokości.

Myślę, że najłatwiej byłoby jakoś rozwiązaćfałszywe pozycjonowanie bezwzględne lub uzyskanie flexbox, aby pokazać elementy w kolejności (od góry do dołu) bez wyraźnego ustawienia wysokości na kontenerze. Oba próbowałem bez zadowalających rezultatów. Jestem otwarty na używanie rozwiązania javascript, ale staram się go jak najlepiej ominąć i rozwiązać tylko za pomocą CSS.

Oto codepen z przykładem pokazującym mój problem. Usuń klasę nadrzędną z HTML, aby zobaczyć pozycję pozycjonowania absolutnie zgodnie z przeznaczeniem (pamiętaj, że spowoduje to, że pozycjonowanie będzie czasem nieprawidłowe).

Odpowiedzi:

0 dla odpowiedzi № 1

Czy jesteś w stanie ustawić <li> do position: relative; z menu wyboru umieszczonym absolutnie w środku <li>? AFAIK to standardowy sposób osiągnięcia tego efektu.

Następnie:

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

-1 dla odpowiedzi № 2

Po prostu ustaw position:relative do uli podmenu pozycji, jeśli potrzebujesz z marginesem właściwości.