Standardpositionswerte für die absolute Positionierung verstehen
Wenn in CSS ein Element absolut positioniert ist, werden seine Koordinaten relativ zu seinem enthaltenden Block angegeben . Was passiert jedoch, wenn für die Eigenschaften oben, links, unten oder rechts keine expliziten Werte angegeben werden? Um dieses Rätsel zu lösen, untersuchen wir die Standardwerte und ihre Auswirkungen.
Wie erwartet ist der Standardwert für alle diese Eigenschaften nicht Null, sondern „auto“. Wenn gemäß der CSS-Spezifikation (Abschnitt 9.3.2) alle Offsets für eine absolut positionierte Box auf „Auto“ gesetzt sind, bleibt sie an ihrer ursprünglichen Position, als ob sie überhaupt nicht positioniert wäre.
Dieses Konzept wird klarer in Abschnitt 10.3.7 der Spezifikation, der vorschreibt, dass die Eigenschaft left zuerst aufgelöst wird, wenn alle drei von left, width und right automatisch sind. Wenn die Richtung des Elements von links nach rechts ist ('ltr'), wird left auf die statische Position gesetzt; andernfalls wird rechts auf die statische Position gesetzt
Ähnlich regelt Abschnitt 10.6.4 vertikale Dimensionsbeschränkungen für absolut positionierte Elemente. Wenn oben, Höhe und unten alle automatisch sind, wird der oberen Eigenschaft standardmäßig die statische Position zugewiesen.
In der Praxis bedeutet dies, dass ein absolut positioniertes Element ohne explizite Koordinatenwerte dort bleibt, wo es wäre normal positioniert ist, ohne dass sich seine Position verändert hat. Dies wird als „statische Position“ bezeichnet.
Um es zusammenzufassen: Wenn keine spezifischen Werte für die Eigenschaften „oben“, „links“, „unten“ oder „rechts“ eines absolut positionierten Elements angegeben werden, wird der Standardwert „auto“ angenommen. Dadurch bleibt die ursprüngliche Position des Elements in seinem Container effektiv erhalten.
Das obige ist der detaillierte Inhalt vonWas passiert mit absolut positionierten Elementen ohne explizite Werte für oben, links, unten oder rechts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!