Absolute und relative Position verstehen: Breite, Höhe und mehr

Beim Umgang mit Positionierungselementen auf einer Webseite die Konzepte verstehen von absoluter vs. relativer Position ist entscheidend. Lassen Sie uns auf vier wichtige Punkte eingehen, die häufig Fragen aufwerfen:

1. Relative vs. absolute Breite

Warum nimmt ein relativ positioniertes Div automatisch 100 % Breite ein, während ein absolut positioniertes Div nur die Inhaltsbreite einnimmt?

Der Grund ist die Einstellungsposition :absolute entfernt das Element aus dem normalen Fluss der Dokumentstruktur. Ohne explizit eine Breite zu definieren, kann der Browser die Breite des absolut positionierten Divs nicht bestimmen. Um eine Breite von 100 % zu erreichen, legen Sie explizit width:100 % fest.

2. Höhe und relative Position

Warum hat das Setzen der Höhe auf 100 % keinen Einfluss auf das relativ positionierte Div, aber das absolut positionierte Div nimmt 100 % Höhe ein?

Ein Element mit Position :relative verhält sich hinsichtlich seiner Höhe ähnlich wie ein Element mit position:static. Daher hat die Einstellung height:100 % keine Auswirkung, es sei denn, das übergeordnete Element hat eine definierte Höhe. Im Gegensatz dazu werden absolut positionierte Elemente aus dem Dokumentfluss entfernt und passen ihre Höhe basierend auf der Höhe ihres enthaltenden Elements an.

3. Margin-Top und Verschiebung

Warum verschiebt margin-top:30px das absolut positionierte Div, aber nur das relativ positionierte Div, wenn top:30px verwendet wird?

Das ist wahrscheinlich bezogen auf die übergeordneten Elemente in Ihrer HTML-Struktur. Ohne Bereitstellung des vollständigen HTML- und CSS-Codes ist es schwierig, die genaue Ursache zu ermitteln.

4. Absolute Position ohne Oben und Links

Wenn Sie top:0 und left:0 für ein absolut positioniertes Div nicht angeben, warum nimmt es dann den Platz über dem Div davor ein?

Die Standardeinstellungen für die oberen und linken Eigenschaften sind „Auto“. Das bedeutet, dass der Browser diese Werte automatisch basierend darauf berechnet, wo sich das Element befinden würde, wenn es nicht position:absolute hätte. Infolgedessen erscheint das absolut positionierte Div über dem vorhergehenden Div, ohne seine Position explizit zu definieren.