Verwenden von Position in CSS

CSS bietet unterschiedliche Eigenschaften, um die in HTML erstellten Webseiten zu stylen. Mit diesen Eigenschaften können Sie verschiedene Elemente entwerfen. Eine solch fantastischste Eigenschaft ist die “Position" Eigentum. CSS “PositionEigenschaft ist eine der häufigsten und wesentlichen Eigenschaften, die zur Anpassung der Position der HTML -Elemente verwendet werden.

In diesem Handbuch führen Sie die CSS -Position für Position. Also beginnen wir beginnen.

Was ist CSS -Position "Position"?

In CSS, die “PositionWird verwendet, um anzugeben, wo ein Element auf der Seite basierend auf seiner Position angezeigt wird. Das Kombinieren mit den Eigenschaften der oberen, rechts, unten und linken CSS bestimmt, wo das Element platziert wird.

Syntax

Die Syntax der CSS -Positionseigenschaft ist unten angegeben:

Position: Werte

Anstelle von "Wert"Sie können die Position von Elementen als" festlegen "festlegen"statisch","relativ","absolut", Und "Fest”.

Schauen wir uns jeden Wert mit Beispielen genauer an, um zu verstehen, wie sie sich auf die Position der Seitenelemente auswirken.

Beispiel

In HTML fügen wir zwei Behälter innerhalb des Body -Tags hinzu und dem ersten Div den Klassennamen als "zuweisen"Div1"Und die zweite Div als"Div2”:

Div 1
Div 2

Danach werden wir den Körper der Webseite mithilfe von "stylen" stylenKörper"In CSS und setzen Sie die Hintergrundfarbe des Körpers als" als "RGB (127, 255, 212)”:

Körper
Hintergrundfarbe: RGB (127, 255, 212);

Es ist ersichtlich, dass die Hintergrundfarbe auf der Webseite angewendet wird:

Verwenden Sie in unserer CSS -Datei ““divUm die gleichen Eigenschaften auf einmal auf die Behälter anzuwenden. Passen Sie die Breite und Höhe des Div als “ein100px"Und der Rand als"30px”. Verwenden Sie die Form der Divs, um die Form der Divs zu setzen, die “Grenzradius”Eigenschaft und setzen Sie ihren Wert als"30px”. Passen Sie als nächstes den Text der Div mit der “anTextausrichtungEigentum, um den Div -Text auf "festzulegen" festlegen "Center"Position und die"ZeilenhöheEigentum als "100px”:

div
Breite: 100px;
Höhe: 100px;
Rand: 30px;
Border-Radius: 10px;
Text-Align: Mitte;
Zeilenhöhe: 100px;

Setzen Sie danach die Farbe des Divs, um sie zu unterscheiden. Um dies zu tun, verwenden Sie “.Div1”Um auf die erste DIV zuzugreifen und seine Hintergrundfarbe als" festlegen "festlegen"RGB (236, 226, 128)”:

.div1
Hintergrundfarbe: RGB (236, 226, 128);

Jetzt benutzen ““.Div2”Um auf den zweiten Div zuzugreifen und seine Hintergrundfarbe als" festlegen "festlegen"RGB (187, 166, 214)”:

.div2
Hintergrundfarbe: RGB (187, 166, 214);

Das Ergebnis des oben genannten Codes ist unten angegeben:

Was ist "statische" Position in CSS?

“statisch”Wird verwendet, um die Position in Bezug auf den normalen Seitenfluss einzustellen. Es wird standardmäßig festgelegt. Darüber hinaus haben die Eigenschaften oben, unten, links und rechts keinen Einfluss darauf.

Beispiel

Hier werden wir die Position beider Div als statisch festlegen. Beachten Sie, dass alle anderen Eigenschaften beider Container gleich bleiben:

.div1
…
Position: statisch;

.div2
…
Position: statisch;

Sie können sehen, dass die Divs an ihrer ursprünglichen Position positioniert sind:

Was ist „relative“ Position in CSS?

Um die Position des Elements relativ zu seiner normalen Position festzulegen, ist das “die“relativDer Wert der Positionseigenschaft wird verwendet.

Beispiel

Wir werden die Position von “festlegen“Div1" als "relativ" Und "Div2" als "absolut”. Hier ist die zweite Div nach dem Div1 positioniert:

.div1
…
Position: Relativ;

.div2
…
Position: absolut;

Hier ist das Ergebnis, das zeigt, dass Div2 gemäß der Position von Div 1 angepasst wird:

Was ist „feste“ Position in CSS?

HTML -Elemente können auf dem Browser mithilfe der “fixiert werdenFest”Wert der Positionseigenschaft. Die Position von festen Elementen wird durch das Ansichtsfenster bestimmt, den Bereich des derzeit sichtbaren Dokuments. Mit dem Browserfenster als Referenz ist dieses feste Element relativ dazu positioniert.

Beispiel

Wir werden die Position von “festlegen“Div1" als "Fest" Und "Div2" als "statisch”. Hier werden wir den statischen Wert verwenden, um die Position von “festzulegen“Div2”Nach dem normalen Seitenfluss:

.div1
…
Position: fest;

.div2
…
Position: statisch;

Hier können Sie sehen, dass die Position von “Div1"Ist fest und"Div2”Wird gemäß dem Seitenfluss eingestellt:

Was ist „absolute“ Position in CSS?

In "absolutDie Positionierung ist das Element relativ zum ersten übergeordneten Element positioniert, das nicht statisch ist. Darüber hinaus kann ein Element überall auf einer Seite mit der absoluten Positionierung positioniert werden.

Beispiel

Wir werden die Position von “festlegen“Div1" als "relativ" Und "Div2" als "absolut”. Danach werden wir das verwenden “UnterseiteEigentum als "5pxSo setzen Sie den Div2 am Ende der Seite:

.div1
…
Position: Relativ;

.div2
…
Position: absolut;
unten: 5px;

Das folgende Bild zeigt, dass das Div2 am Ende der Seite positioniert ist:

Das ist es! Wir haben die Beschreibung der Positionseigenschaft im Detail erläutert.

Abschluss

Um die Position des HTML -Elements festzulegen, ist das “PositionDas Eigentum von CSS wird verwendet. Die Positionseigenschaft unterstützt vier verschiedene Werte wie statisch, relativ, fest und absolut. In diesem Artikel haben wir die Positionseigenschaft im Detail erläutert und Beispiele für alle Werte angegeben.