Wie gehe ich mit kollabierenden Containern um, wenn „display: inline-block' und „position: absolute' verwendet werden?

Elemente mit gemischter Anzeige und Positionierung positionieren

Die Kombination von display:inline-block und position:absolute in CSS kann zu unerwartetem Verhalten führen . Wenn ein Element absolut positioniert ist, verhält es sich so, als ob es aus dem normalen Inhaltsfluss entfernt wäre, und sein enthaltendes Element ist sich seiner Höhe nicht bewusst.

Inline- vs. absolute Positionierung

display:inline-block ermöglicht den horizontalen Fluss von Elementen neben anderen Elementen, während position:absolute Elemente aus dem Fluss entfernt und sie entsprechend den Eigenschaften oben, unten, links und rechts positioniert.

Problem mit der absoluten Positionierung

Im bereitgestellten Code entfernt das position:absolute-Element (.element-right-b) es aus dem Fluss und berücksichtigt es nicht für die Gesamthöhenberechnung von der .section-Container. Dadurch hat der Behälter keine Eigenhöhe und fällt auf Null zusammen.

Lösungen

1. Höhe des Behälters festlegen: Wenn Position :absolute ist wichtig. Stellen Sie die Höhe des .section-Containers manuell ein, um zu verhindern, dass er zusammenfällt.
2. Alternative Positionsoption: Wenn eine absolute Positionierung nicht unbedingt erforderlich ist, sollten Sie stattdessen die Verwendung von Float oder Sticky in Betracht ziehen . Beide ermöglichen es Elementen, sich relativ zu anderen Elementen zu positionieren, ohne das Layout zu beeinflussen.
3. Inline-Block mit Padding: Stellen Sie bei mehreren verschachtelten Spalten mit festen Positionen die Anzeige aller verschachtelten Elemente auf „Anzeige“ ein :inline-block und wenden Sie den linken Abstand auf nachfolgende Spalten an, um den gewünschten Einrückungseffekt zu erzielen.

Spezifisches Beispiel für verschachtelte Spalten

Um verschachtelte Spalten mit festem Wert zu erreichen Positionen ändern Sie das CSS wie folgt:

<code class="css">.section span {
  display: inline-block;
}
.element-left {
  width: 200px;
}
.element-right {
  width: 100px;
}
.indent-1 {
  padding-left: 10px;
}
.indent-2 {
  padding-left: 20px;
}</code>

Das obige ist der detaillierte Inhalt vonWie gehe ich mit kollabierenden Containern um, wenn „display: inline-block' und „position: absolute' verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!