Wie kann ich die Höhe eines übergeordneten Containers mit absolut positionierten untergeordneten Containern festlegen?

Höhe des übergeordneten Elements und absolute Positionierung

Wenn wir mit Containern und ihren absolut oder relativ positionierten untergeordneten Elementen arbeiten, können wir bei der Bestimmung der Höhe des Containers auf Herausforderungen stoßen und gleichzeitig sicherstellen, dass die Kinder bleiben darin.

Problem

Berücksichtigen Sie das folgende HTML und CSS Code:

<section>

article {
  position: relative;
}

.one {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: absolute;
  top: 10px;
  right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

Das Ziel besteht darin, sicherzustellen, dass der „Balken“-Text zwischen den vier Quadraten und nicht dahinter erscheint. Aufgrund der absoluten Positionierung der Quadrate kann die Höhe des Containers jedoch nicht anhand der Abmessungen seiner untergeordneten Elemente festgelegt werden.

Lösungen

Update 2022:

Moderne CSS-Layout-Technologien wie Flex oder Grid bieten elegantere Lösungen. Es wird empfohlen, diese Optionen für eine bessere Unterstützung und Flexibilität zu erkunden.

Ursprüngliche Antwort:

Mit reinem CSS ist es nicht möglich, die Höhe des übergeordneten Elements festzulegen und dabei die absolute Höhe beizubehalten Positionierung für seine Kinder.

Alternative Ansätze:

• JavaScript: Berechnen Sie die Höhe der absolut positionierten untergeordneten Elemente nach dem Rendern und legen Sie damit die Höhe des übergeordneten Elements fest.
• Float und Ränder: Positionieren Sie die untergeordneten Elemente mithilfe von Float und Rändern und behalten Sie dabei den Dokumentenfluss bei. Nutzen Sie overflow:hiden (oder eine Clearfix-Technik) für das übergeordnete Element, um seine Höhe basierend auf den Abmessungen seiner untergeordneten Elemente zu erweitern.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines übergeordneten Containers mit absolut positionierten untergeordneten Containern festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!