Wie kann ich die Höhe eines übergeordneten Containers mit absolut positionierten untergeordneten Elementen richtig einstellen?

Absolute Position und übergeordnete Höhe

Bei der Arbeit mit absolut positionierten Elementen wird es schwierig, die Höhe ihrer übergeordneten Container zu bestimmen. Dieses Problem tritt auf, wenn untergeordnete Elemente absolut oder relativ innerhalb eines übergeordneten Containers positioniert sind und Sie eine geeignete Höhe für das übergeordnete Element festlegen möchten, um sicherzustellen, dass seine untergeordneten Elemente innerhalb seiner Grenzen bleiben.

Um dieses Problem zu beheben, ist es wichtig um zu erkennen, dass absolut positionierte Elemente aus dem Dokumentenfluss entfernt werden, sodass sie keinen Einfluss auf die Abmessungen ihrer übergeordneten Container haben. Wenn die Einstellung „Position: absolut“ für untergeordnete Elemente erforderlich ist, sollten Sie die Verwendung von JavaScript in Betracht ziehen, um die Höhe des übergeordneten Containers nach dem Rendern der untergeordneten Elemente dynamisch anzupassen. Dazu muss JavaScript verwendet werden, um die Höhe der absolut positionierten untergeordneten Elemente zu berechnen und diesen Wert dann auf die Höhe des übergeordneten Containers anzuwenden.

Eine einfachere Lösung besteht jedoch darin, die Float-Eigenschaft und die Ränder zu verwenden, um die absolute Positionierung während zu imitieren Beibehaltung der untergeordneten Elemente im Dokumentenfluss. Durch Festlegen eines Float-Werts für die untergeordneten Elemente (z. B. float: left) und Einbinden von Rändern können Sie die gewünschte Positionierung erreichen. Darüber hinaus erzwingt das Festlegen von overflow:hiden im übergeordneten Container oder die Implementierung einer anderen Clearfix-Technik, dass seine Höhe vergrößert wird, um sie an die Größe seiner untergeordneten Elemente anzupassen.

Hier ist ein Beispiel, wie diese Positionierung mithilfe von CSS erreicht wird:

article {
  position: relative;
  overflow: hidden;
}

.one {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: relative;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

Durch die Anwendung dieser Techniken können Sie die Positionierung untergeordneter Elemente effektiv steuern und die angemessene Höhe für ihre übergeordneten Container beibehalten.

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