/ / Wie kann ich verhindern, dass ein absolut positioniertes Element in CSS-Spalten bricht? - html, css, css3, css-position, Spaltenanzahl

Wie kann ich verhindern, dass ein absolut positioniertes Element innerhalb von CSS-Spalten bricht? - html, css, css3, css-position, Spaltenanzahl

Ich habe ein 2-Spalten-Layout mit HTML und CSS. Innerhalb dieser Spalten habe ich ein Auswahlmenü, das angezeigt wird, wenn auf eines dieser Listenelemente geklickt wird. Ich muss dieses Auswahlmenü relativ zum angeklickten Element positionieren und nicht das Layout der umgebenden Elemente beeinflussen, wie bei einem herkömmlichen Auswahlmenü. Allerdings kann ich keine traditionellen Auswahlmöglichkeiten verwenden, da dies ein Auto-Suggest-Menü ist. Also verwende ich ein absolut positioniertes Element für den Menücontainer in seinem relativ positionierten Elternelement.

Was ich möchte: Liste mit absolut positioniertem Kind im Säulenlayout

Mein Problem ist, dass der absolut positionierte Gegenstand bricht, als ob er Teil der Säulen wäre. Das widerspricht allem, was ich verstehe position: absolute, aber es scheint so zu sein innerhalb der Spezifikation. Was frustrierender ist, ist, dass der Browser das absolut positionierte Objekt so anzeigt, wie ich es vorschlage (solange ich es nicht einstelle position: relative auf dem Elternteil), aber ich muss einstellen position: relative Auf dem übergeordneten Element oder dem Auswahlmenü (als absolut positioniertes Element) wird nicht immer das zugehörige Element angezeigt.

Was ich bekomme: Bildbeschreibung hier eingeben

Ich habe auch ein spaltenartiges Layout mit verwendetmit flexbox, aber mit diesem werden die Elemente von links nach rechts gezeigt, wenn ich sie von oben nach unten sehen muss, in der Reihenfolge, wie in einem traditionellen columned Layout. Ich könnte flexbox mit verwenden flex-flow: column wrap, aber dazu müsste ich die Höhe des Containerelements kennen / festlegen, was ich nicht kann. CSS-Spalten umschließen die Liste schön, ohne eine Höhe festlegen zu müssen.

Ich denke, die einfachste Lösung wäre irgendwiefälschen absolute Positionierung oder um flexbox zu bekommen, um die Gegenstände in der Reihenfolge (von oben nach unten) zu zeigen, ohne explizit eine Höhe auf dem Behälter zu setzen. Beides habe ich ohne zufriedenstellende Ergebnisse versucht. Ich bin offen für die Verwendung einer JavaScript-Lösung, aber ich versuche mein Bestes, um es zu vermeiden und dies nur mit CSS zu lösen.

Hier ist ein Codepen mit einem Beispiel, das mein Problem zeigt. Entfernen Sie die Elternklasse aus dem HTML-Code, um das absolut positionierte Element wie vorgesehen anzuzeigen (beachten Sie, dass die Positionierung manchmal falsch ist).

Antworten:

0 für die Antwort № 1

Kannst du das einstellen? <li> zu position: relative; mit dem Auswahlmenü absolut innerhalb der <li>? AFAIK Dies ist die Standardmethode, um diesen Effekt zu erzielen.

Dann:

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

-1 für die Antwort № 2

Einfach einstellen position:relative zu ulund Position Untermenü, wenn Sie mit Eigenschaftsrand benötigen.