Implementierung der Positionierung von CSS-Unterelementen relativ zu übergeordneten Elementen

Lösung

Fügen Sie position:relative zum übergeordneten Element hinzu.
Fügen Sie dem untergeordneten Element position:absolute; right:20px hinzu.

Code

HTML-Struktur

<div id="div1">
	<div id="div2"></div>
</div>

CSS

#div1{
	Breite: 500px; Höhe: 500px;
	Hintergrundfarbe: dunkelgrau;
	Position: relativ;
}
#div2{
	Breite: 30px; Höhe: 30px;
	Hintergrundfarbe: rot;
	Position: absolut;
	rechts: 20px;
}

Wirkung

Prinzip

Wenn der Browser HTML rendert, gibt es ein Konzept des Dokumentflusses. Blockelemente werden in einer neuen Zeile gerendert und Inline-Elemente werden inline gerendert. Hier sind die beiden Divs beide Blockelemente, ein übergeordnetes und ein untergeordnetes Element. Normalerweise ist das Rendering-Ergebnis, dass sich das übergeordnete Element in der oberen linken Ecke des Browsers befindet und das untergeordnete Element in der oberen linken Ecke des übergeordneten Elements.

Wenn wir das untergeordnete Element relativ zum übergeordneten Element positionieren möchten, müssen wir das Positionsattribut verwenden.
Positionseigenschaftswert

Wir wissen, dass wir absolute Werte verwenden müssen, um eine Positionierung relativ zum übergeordneten Element zu verwenden. Warum funktioniert die direkte Verwendung von absoluten Werten nicht? Da die absolute Positionierung relativ zum übergeordneten Element verwendet wird, besteht eine Anforderung an das übergeordnete Element, d. h. die Position des übergeordneten Elements kann nicht statisch sein. Wenn die Position des übergeordneten Elements statisch ist, suchen Sie weiter nach oben nach Elementen, bis ein Element gefunden wird, dessen Position nicht statisch ist, und positionieren Sie dieses Element dann relativ. Daher ist es notwendig, die Position des übergeordneten Elements auf relativ einzustellen. Dies hat keine Auswirkung, da die relative Positionierung nur relativ zur normalen Position ist. Die normale Position ist die sogenannte Standardausgabeposition des Dokumentflusses. Wenn wir die Position auf relativ einstellen, ohne den Versatz x, y einzustellen, ist dies gleichbedeutend damit, dass sich die Position des übergeordneten Elements nicht ändert.

Dies ist das Ende dieses Artikels über die Positionierung von untergeordneten Elementen relativ zu ihren übergeordneten Elementen in CSS. Weitere Informationen zur Positionierung von untergeordneten Elementen relativ zu ihren übergeordneten Elementen in CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!