Was sind die Standardwerte für „position: absolute'-Eigenschaften und warum verursachen sie eine Fehlausrichtung?-CSS-Tutorial-php.cn

Was sind die Standardwerte für „position: absolute'-Eigenschaften und warum verursachen sie eine Fehlausrichtung?

Barbara Streisand

Freigeben： 2024-11-07 09:43:02

Original

596 Leute haben es durchsucht

What are the Default Values for `position: absolute` Properties and Why Do They Cause Misalignment?

Standardwerte für die Position: Absolut bei unerwarteter Fehlausrichtung

In Webentwicklungsprojekten stoßen Entwickler bei der Verwendung der absoluten Positionierung gelegentlich auf Probleme mit der Fehlausrichtung von Elementen. Um dieses Problem zu umgehen, kann das Problem manchmal durch Festlegen von position: absolute ohne explizite Parameter behoben werden. Dies wirft die Frage auf, was die Standardwerte für diese Parameter sind.

Während die absolute Positionierung konzeptionell ein Element in Bezug zu seinem enthaltenden Block platziert, ist dies bei den Standardwerten für die Eigenschaften oben, links, unten und rechts nicht der Fall intuitiv. Entgegen den Erwartungen sind sie nicht auf 0 gesetzt.

Wie in der Level-3-Spezifikation der CSS Working Group angegeben, ist der Standardwert für alle diese Eigenschaften auto. Dies bedeutet, dass das Element in seiner statischen Position bleibt, als ob es nicht absolut positioniert wäre.

Betrachten Sie beispielsweise den folgenden Code:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  position:absolute;
}
</style>
</head>

<body>
<h1>Absolute pos</h1>
<p>Paragraph</p>
</body>

</html>

Nach dem Login kopieren

Ohne explizite Positionierung das h1-Element bleibt an seiner ursprünglichen Position:

[Bild des h1-Elements in der oberen linken Ecke des Layouts positioniert]

Die Positionierung eines absolut positionierten Elements wird durch die folgende Einschränkung bestimmt:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

Nach dem Login kopieren

Wenn alle drei Werte „links“, „breite“ und „rechts“ „auto“ sind, wird der Wert „links“ auf die statische Position gesetzt. Ebenso wird die vertikale Positionierung eingeschränkt durch:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

Nach dem Login kopieren

Wenn alle drei Werte „oben“, „Höhe“ und „unten“ auf „Auto“ eingestellt sind, wird der Wert „oben“ auf die statische Position gesetzt .

Zusammenfassend lässt sich sagen, dass Elemente bei Verwendung der absoluten Positionierung ohne explizite Werte an ihrer statischen Position bleiben. Dieses Verhalten mag unerwartet erscheinen, ist jedoch in den CSS-Spezifikationen dokumentiert. Das Verständnis dieser Standardwerte hilft, Fehlausrichtungsprobleme zu vermeiden und fördert die genaue Positionierung in komplexen Weblayouts.

Das obige ist der detaillierte Inhalt vonWas sind die Standardwerte für „position: absolute'-Eigenschaften und warum verursachen sie eine Fehlausrichtung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!