Unterschied zwischen der CSS -Position relativ und absolut

In CSS, die “PositionDie Eigenschaft wird verwendet, um die Position des Elements festzulegen, in der die HTML -Elemente auf der Webseite angezeigt werden sollen. Diese Eigenschaft ist mit den Eigenschaften der linken, rechten, oberen und unteren Grundstücke gebunden, um den endgültigen Ort des HTML -Elements festzulegen.

In diesem Blog wird erörtert:

• Was sind CSS?Position”Typen?
• Wie man CSS benutzt “Position: Relativ" Eigentum?
• Wie man CSS benutzt “Position: absolut" Eigentum?

Was sind CSS -Positionstypen??

Es gibt fünf Arten von CSS -Positionen:

• “statisch”: Die staatlich positionierten Elemente werden nicht von Offseteigenschaften unten, links, rechts und oben betroffen. Es ist der Standardwert eines HTML -Elements.
• “Fest”: Das fest positionierte Element bleibt an derselben Stelle, an der es auch auf dem Bildschirmroll eingestellt ist.
• “klebrig”: Ein klebriges positioniertes Element bleibt statisch, wenn der Benutzer den Bildschirm scrollt.
• “absolut”: Ein absolutes Element ist positioniert oder relativ zum nächstgelegenen oder am nächsten stehenden HTML.
• “relativ”: Das relative Element ist relativ zu seiner normalen Position platziert.

Bevor wir den Unterschied zwischen dem relativen und dem absoluten positionierten Element diskutieren, werden wir eine Webseite für die Demonstration erstellen.

Voraussetzung

Fügen Sie in HTML zunächst ein DIV -Element mit dem Namensattributnamen der Klassen hinzu “Div-Eltern”. Fügen Sie im Inneren vier weitere Tags mit dem Klassennamen hinzu “Div-1”. Beachten Sie, dass nur der zweite zwei Klassen hat “Div-1" Und "Positionierung”.

Html

Wenden wir das CSS -Styling auf die Elemente an, die im obigen HTML -Codeblock genannt werden.

Stil „Div-Eltern“ div

.Div-Eltern
Rand: 100px;
Position: Relativ;

Das Divelelement mit Klassennamen “Div-Eltern”Wird mit den CSS -Eigenschaften gestaltet, die unten erklärt werden:

• “RandDie Eigenschaft wird verwendet, um den Raum oben im DIV -Element einzustellen.
• “Position"Eigenschaft wird als" festgelegt "relativ”, Die das ausgewählte Element relativ zu seiner normalen Position positioniert oder platziert.

Stil „Div-1“ div

.div-1
Hintergrundfarbe: Blueviolet;
Breite: 200px;
Höhe: 200px;
Grenze: 5PX gestrichelt #000000;
Anzeige: Inline-Block;

Hier ist die Erklärung der angewandten Eigenschaften:

• “HintergrundfarbeDie Eigenschaft legt die Hintergrundfarbe des DIV -Elements fest.
• “BreiteEigenschaft definiert die Breite des hinzugefügten HTML -Elements.
• “HöheDer Wert der Eigenschaft repräsentiert die Höhe des HTML -Elements.
• “Grenze”Eigentum wendet die Grenze um ein Element an. Es wird angegeben, indem die Werte für Breite, Stil und Farbe verwendet werden.
• “Anzeige"Mit dem Wert"Inline-BlockDie Eigenschaft ermöglicht die Anwendung der Breite und der Höhe auf das Element.

So verwenden Sie "Position: Relativ" in CSS?

Wenn Sie das festlegen "Position"Eigentumswert als"relativ”, Es bewegt sich relativ zu seiner normalen Position. Seine Position hängt auch von den Werten als Seiteneigenschaften ab. Andere Elemente werden jedoch nicht geändert, um die vom Element zurückgelassene Lücke zu schließen.

Stil „Positionierung“ div

.Positionierung
Hintergrundfarbe: Schokolade;
Position: Relativ;
Top: 20px;
links: 20px;

Hier:

• “Position"Eigenschaftswert wird als" festgelegt "relativ”, Der das Element relativ zu seiner normalen Position positioniert. Es wird dann mit den Eigenschaften der oberen, rechten, linken und unteren Eigenschaften gepaart, um den endgültigen Standort festzulegen.
• “Spitze”Eigenschaft mit dem Wert“20px”Legt einen Platz von 20px über einem Element fest.
• “links”Eigenschaft mit dem Wert“20px”Bietet einen Raum von 20px auf der linken Seite eines Elements.

Das Ergebnis unten zeigt deutlich die Position des zweiten Boxs von oben und links:

So verwenden Sie „Position: Absolut“ in CSS?

Der "Position”Eigenschaft mit dem Wert“absolut”Ändert die Position des Elements relativ zu seiner positionierten übergeordneten Div. Wenn die Position des übergeordneten Elements nicht relativ festgelegt ist, verschiebt sich der DIV relativ zum Körper der Webseite. Darüber hinaus füllen andere Elemente den von dem Element hinterlassenen Raum.

Lassen Sie uns die "ändern"Position"Eigentum der DIV mit der Klasse" genannt "Positionierung”Von relativ zu Absolute und sehen Sie den Unterschied an:

Position: absolut;

Das zweite Box ist vom oberen und 20px -Raum von links im Vergleich zu seinem übergeordneten Element auf 20px Platz eingestellt:

Das war alles um die relative und absolute Position in CSS.

Abschluss

In CSS wird die Positionseigenschaft verwendet, um den endgültigen Ort des Elements zu definieren. Genauer gesagt das “relativDie Position platziert die Position des Elements relativ zu seiner normalen Position, während die “absolutDie Position platziert das Element relativ zu seinem positionierten übergeordneten HTML -Element. In diesem Blog wurde der Unterschied zwischen relativen und absoluten CSS -Positionen erörtert.