/ / Ako môžem zabrániť tomu, aby sa absolútne umiestnený prvok zlomil v stĺpcoch CSS? - html, css, css3, css-pozícia, počet stĺpcov

Ako môžem zabrániť tomu, aby sa v rámci stĺpcov CSS dostal absolútne umiestnený prvok? - html, css, css3, css-pozícia, počet stĺpcov

Mám rozloženie 2 stĺpce pomocou HTML a CSS. V týchto stĺpcoch mám výberové menu, ktoré sa zobrazí pri kliknutí na jednu z týchto položiek zoznamu. Musím umiestniť tento selemenu vzhľadom na kliknutú položku a neovplyvniť rozloženie prvkov okolo nej, ako je tradičné menu výberu. Nemôžem však použiť tradičné výbery, pretože ide o vstup / menu autosuggest. Takže používam absolútne umiestnenú položku pre zásobník s menami v jeho relatívne umiestnenej rodičke.

Čo chcem: zoznam s absolútne umiestneným dieťaťom v usporiadaní v stĺpci

Môj problém je, že absolútne umiestnená položka sa rozpadá, akoby bola súčasťou stĺpcov. To je v rozpore s tým, čo som pochopil position: absolute, ale zdá sa, že je v rámci špecifikácie, Čo je viac frustrujúce je to, že prehliadač zobrazuje absolútne umiestnenú položku, ako ju zamýšľam (pokiaľ ju nenastavujem position: relative na rodiča), ale musím nastaviť position: relative na rodičovke alebo na výber (ako absolútne umiestnená položka) nebudú vždy zobrazovať priradený príslušný prvok.

Čo získam: tu zadajte popis obrázku

Tiež som skúsil rozloženie ako v stĺpcochpomocou flexboxu, ale s tým sú položky zobrazené zľava doprava, keď ich potrebujem zobraziť zhora nadol, rovnako ako v tradičnom stĺpcovom usporiadaní. Mohol by som použiť flexbox s flex-flow: column wrap, ale to by vyžadovalo, aby som vedel / nastavil výšku kontajnerového prvku, čo nemôžem robiť. CSS stĺpce obklopujú zoznam pekne bez nutnosti nastaviť výšku.

Myslím, že najjednoduchšie riešenia by boli nejakým spôsobomfalošné absolútne umiestnenie alebo dostať flexbox pre zobrazenie položiek v poradí (zhora nadol) bez výslovného nastavenia výšky na kontajneri. Oba sme sa snažili bez uspokojivých výsledkov. Som otvorený pre použitie riešenia javascript, ale snažím sa vyhnúť a vyriešiť to len pomocou CSS.

Tu je kód s príkladom môjho problému. Odstráňte materskú triedu z kódu HTML, aby ste videli absolútne umiestnenú položku podľa určenia (všimnite si, že to spôsobí, že polohovanie bude niekedy nesprávne).

odpovede:

0 pre odpoveď č. 1

Môžete nastaviť <li> na position: relative; pričom vybrané menu je umiestnené úplne vnútri <li>? AFAIK je to štandardný spôsob dosiahnutia tohto účinku.

potom:

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

-1 pre odpoveď č. 2

Stačí nastaviť position:relative na ula podmenu pozície, ak potrebujete s majetkovou rezervou.