Wie positioniere ich untergeordnete CSS-Elemente relativ zu übergeordneten Elementen?

In CSS können Sie das Positionsattribut verwenden, um das untergeordnete Element relativ zum übergeordneten Element zu positionieren, indem Sie den relativen Positionierungsstil „position:relative;“ für das übergeordnete Element und den absoluten Positionierungsstil „position:absolute;“ festlegen untergeordnetes Element.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS2-Version. Diese Methode ist für alle Computermarken geeignet.

Verwandte Empfehlungen: „Programmiervideokurs“

So implementieren Sie die Positionierung von untergeordneten Elementen relativ zu übergeordneten Elementen in CSS

Stileinstellungen für übergeordnete Elemente:

position:relative;

Stil für untergeordnete Elemente:

position:absolute;

Beispielcode:

HTML-Struktur

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

css

#div1{
width:500px;height:500px;
background-color:darkgray;
position:relative;
}
#div2{
width:30px;height:30px;
background-color:red;
position:absolute;
right:20px;
}

Effekt

Browser-Rendering HTML wird als Dokumentfluss bezeichnet. Elemente auf Blockebene werden zeilenumbrochen und Inline-Elemente werden inline gerendert div ist ein Element auf Blockebene mit einem übergeordneten und einem untergeordneten Element. Das normale Rendering-Ergebnis ist, dass sich das übergeordnete Element in der oberen linken Ecke des Browsers und das untergeordnete Element in der oberen linken Ecke des übergeordneten Elements befindet.

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

Position-Attributwert

Attributwert Beschreibung absolute Erzeugt ein absolut positioniertes Element, das relativ zum ersten übergeordneten Element positioniert ist, anders als die statische Positionierung. relative Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist. Wir wissen, dass Sie zur Verwendung der Positionierung relativ zum übergeordneten Element absolute Werte verwenden müssen. Warum funktioniert die direkte Verwendung von „absolut“ nicht? Da für die Positionierung relativ zum übergeordneten Element absolute Anforderungen verwendet werden, besteht eine Anforderung für das übergeordnete Element, d. h. die Position des übergeordneten Elements darf nicht statisch sein. Wenn die Position des übergeordneten Elements statisch ist, suchen Sie weiter nach Elementen nach oben, bis Sie ein Element finden, dessen Position nicht statisch ist. Sie müssen also die Position des übergeordneten Elements auf „relativ“ setzen. Dies hat keine Auswirkung, da „relativ“ nur relativ zur normalen Position positioniert ist Die normale Position ist die sogenannte Standardausgabeposition des Dokumentflusses. Wenn wir die Position auf relativ setzen, ohne die Offsets x und y festzulegen, hat sich die Position des übergeordneten Elements nicht geändert. Weitere verwandte Artikel finden Sie auf der

Chinesischen PHP-Website

! !

Das obige ist der detaillierte Inhalt vonWie positioniere ich untergeordnete CSS-Elemente relativ zu übergeordneten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!