Warum erscheinen absolut positionierte Elemente manchmal falsch ausgerichtet?

Standardpositionen für absolut positionierte Elemente verstehen

Bei Verwendung der Eigenschaft „position: absolute“ kommt es häufig zu Problemen mit falsch ausgerichteten Elementen. Dies tritt auf, wenn die Standardwerte für diese Eigenschaften nicht den Erwartungen entsprechen.

In HTML werden absolut positionierte Elemente platziert, ohne dass sich dies auf den umgebenden Inhalt auswirkt. Standardmäßig sind die Werte für oben, links, unten und rechts jedoch nicht auf 0 gesetzt.

Die Standardwerte

Stattdessen ist der Standardwert für alle diese Eigenschaften „Auto“. Dies bedeutet, dass die Position des Elements basierend auf seinem enthaltenden Block berechnet wird, der das nächstgelegene Vorgängerelement mit einer nicht statischen Position ist.

Wenn alle drei Eigenschaften (links, Breite und rechts) auf „Auto“ eingestellt sind, Die Position des Elements wird relativ zur statischen Position bestimmt, d. h. seiner ursprünglichen Position, wenn es nicht absolut positioniert wäre.

Gemäß der CSS-Spezifikation (Abschnitt 10.3.7):

Wenn alle drei von „left“, „width“ und „right“ sind „auto“: Setzen Sie zunächst alle „auto“-Werte für „margin-left“ und „margin-right“ auf 0. Wenn dann die Eigenschaft „direction“ des Das Element, das den die statische Position enthaltenden Block festlegt, wird auf „links“ auf die statische Position gesetzt und Regel Nummer drei unten angewendet. andernfalls stellen Sie „rechts“ auf die statische Position ein und wenden die Regel Nummer eins unten an.

In ähnlicher Weise werden für vertikale Abmessungen die Eigenschaften (Oben, Höhe und Unten) wie folgt berechnet (Abschnitt 10.6.4):

Wenn alle drei von „oben“, „Höhe“ und „unten“ automatisch sind, stellen Sie „oben“ auf die statische Position ein und wenden Sie Regel Nummer drei unten an.

Einfacher ausgedrückt: Die Standardposition ist die ursprüngliche Position des Elements im Layout, auch wenn es absolut positioniert ist.

Das obige ist der detaillierte Inhalt vonWarum erscheinen absolut positionierte Elemente manchmal falsch ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!