Zusammenfassung der vier Methoden zur Positionspositionierung in CSS

In diesem Artikel geht es um vier Methoden zur Positionierung Position in CSS Zusammenfassung

1. Position: statisch ; statisch Positionierung (Standard )

Alle Elemente im Standarddokumentfluss sind statisch positioniert

2 .position:relativ; Relative Positionierung

Abweicht nicht vom Standarddokumentfluss, „hinterlässt eine Lücke in der Heimatstadt und trennt die Schatten“

Funktionen : Wenn die relative Positionierung eingestellt und die Attribute oben, links, rechts, unten festgelegt sind, wird das Feld angezeigt in der Box sein Versetzen Sie die ursprüngliche Position

Verwendung der relativen Positionierung: Wird im Allgemeinen nicht für den „Abdeckeffekt“ verwendet, nur zwei Funktionen:

(1) Feinabstimmungselemente

(2) Referenz für absolute Positionierung, untergeordnetes und übergeordnetes Element

Sie können links und rechts verwenden, um den Versatz der rechten und linken Seite des Felds zu beschreiben; Sie können oben und unten verwenden, um zu beschreiben Beschreiben Sie den unteren und oberen Rand der Box. Versatz von

position：relative；
top：10px;
left：10px;   //相对于原来位置向右下移10px

position：relative;
top:-10px;
left:-10px;   //相对于原来位置向左上移10px

3 . position:absolute; Absolute Positionierung

Außerhalb des Standarddokumentflusses

Funktionen: (1) Wenn dieses Element kein übergeordnetes Element hat, dann top, links, rechts und unten werden in Zukunft relativ zum Browser sein. Positionierung durch das Browserfenster

(2) Wenn das absolut positionierte Element ein übergeordnetes Element hat, das übergeordnete Element jedoch nicht relativ positioniert ist, dann oben, Links, rechts und unten sind zu diesem Zeitpunkt immer noch relativ zum Browserfenster positioniert

　(3) Wenn das absolut positionierte Element ein übergeordnetes Element hat und das übergeordnete Element eine Positionierung (nicht statisch) hat, dann Der Versatz des absolut positionierten Elements basiert auf seinem eigenen übergeordneten Element

　(4) Elemente nach der absoluten Positionierung belegen nicht die Position auf der Seite

4 Positionierung

Abkehr vom Standard-Dokumentenfluss

Behoben Der Zweck der Positionierung: Einige kleine Anzeigen auf der Seite müssen an einer festen Position auf der Seite fixiert werden

Zusammenfassung: Beim Schreiben von Seiten werden in Zukunft am häufigsten folgende verwendet: Absolute Positionierung ist keine relative Positionierung, aber absolute Positionierung wird zusammen mit relativer Positionierung verwendet

Spezifikation: Das untergeordnete Element muss mit dem übergeordneten Element identisch sein (untergeordnete Elemente verwenden absolute Positionierung und übergeordnete Elemente verwenden relative Positionierung)

Das obige ist der detaillierte Inhalt vonZusammenfassung der vier Methoden zur Positionspositionierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!