CSS -Position Eigenschaft | Erklärt

Cascading Style Sheets (CSS) besteht aus einer Vielzahl von Eigenschaften, die zum Stylen von HTML -Elementen verwendet werden. Beispiel Definiert die Grenzspezifikationen eines Elements, und die Liste geht weiter. Diese Beschreibung ist jedoch so konzipiert, dass sie Licht auf die Position von CSS legt. Dieser Leitfaden deckt Folgendes ab.

1. Positionseigenschaft
2. So weisen Sie einem HTML -Element eine relative Positionierung zu
3. So weisen Sie einem HTML -Element eine absolute Positionierung zu
4. Wie man einem HTML -Element eine feste Position gibt

Positionseigenschaft

Die Positionseigenschaft von CSS gibt die Position eines HTML -Elements auf einer Webseite an. Es hat die unten erwähnte Syntax.

Position: Wert;

Hier ist ein Beispiel, um die Positionseigenschaft weiter zu demonstrieren.

So weisen Sie einem HTML -Element eine relative Positionierung zu

Dieses Beispiel zeigt den relativen Wert der Positionseigenschaft, der ein Element in Bezug auf seine ursprüngliche Position legt.

In diesem Beispiel platzieren wir ein Bild an einer bestimmten Position mit dem relativen Wert der Positionseigenschaft.

Html

CSS

.Bild
Position: Relativ;
Links: 80%;
Top: 0%;
Höhe: 100px;
Breite: 200px;

Ausgang

Hier wird das Bild zu 80% links von der Seite in Bezug auf seine ursprüngliche Position positioniert.

Die Standardposition des Bildes ist wie folgt.

Es gibt einige Werte, die der Positionseigenschaft von CSS zugeordnet werden können, die wie folgt sind.

Wert	Beschreibung
statisch	Dies ist der Standardwert, der Elemente gemäß ihrer in dem Dokument definierten Position platziert.
relativ	Es positioniert ein Element in Bezug auf seine ursprüngliche Position.
absolut	Es positioniert ein Element in Bezug auf die Position des Vorfahren des Elements.
Fest	Es positioniert ein Element in Bezug auf das Browserfenster.
klebrig	Es positioniert ein Element unter Bezugnahme auf die Bildlaufposition des Benutzers.
Initial	Es positioniert ein Element zu seinem Standardwert.
erben	Es positioniert ein Element in Bezug auf die Eigenschaften, die von seinem übergeordneten Element geerbt wurden.

Einige weitere Beispiele

Für Ihr besseres Verständnis haben wir die Positionseigenschaft mit Hilfe einiger weiterer Beispiele veranschaulicht.

So weisen Sie einem HTML -Element eine absolute Positionierung zu

Dieses Beispiel zeigt den Absolutwert der Positionseigenschaft.

Html

Eltern Div
Kinderdiv

Hier werden zwei Beispiele sind, die Elemente erstellt werden, die als Elternteil angesehen werden und der andere als Kinderdiv.

CSS

Den übergeordneten Div wurde die relative Position zugewiesen und die untergeordnete DIV wurde die absolute Position zugewiesen. Wie wir wissen, dass der absolute Wert ein Element in Bezug auf die Position seines Elternteils positioniert, damit das untergeordnete Div eine absolute Position in Bezug auf das übergeordnete Div der übergeordneten Div zugewiesen hat, haben wir die relative Position zugewiesen.

Ausgang

Das Kind Div wurde in einer absoluten Position in Bezug auf die Eltern Div platziert.

Wie man einem HTML -Element eine feste Position gibt

Dieses Beispiel zeigt den festen Wert der Positionseigenschaft.

Html

Gelbe div

Rote div

Grüne div

Wir haben drei Elemente mit dem Namen Yellow Div erstellt, zweiter mit dem Namen Red Div und dem dritten Div mit dem Namen Green Div.

CSS

.Gelb
Hintergrundfarbe:#ffe162;
Breite: 400px;
Höhe: 500px;

.Rot
Hintergrundfarbe:#ff6464;
Breite: 300px;
Höhe: 350px;

.Grün
Hintergrundfarbe:#91C483;
Breite: 200px;
Höhe: 100px;
Position: fest;
Links: 70%;
Top: 50%;

P
Polsterung: 20px 0;
Text-Align: Mitte;
Schriftfamilie: 'Segoe UI', Tahoma, Genf, Verdana, Sans-Serif

Im obigen Beispiel wird nur dem grünen DIV die feste Position zugewiesen. Wenn Sie die Webseite scrollen.

Ausgang

Die grüne DIV wurde erfolgreich die feste Positionierung zugewiesen.

Abschluss

Die Positionseigenschaft von CSS gibt die Position eines HTML -Elements auf einer Webseite an. Darüber hinaus sind die Werte, die diese ausstellen können. statisch, was den Standardwert ist, positioniert absoluter Wert ein Element in Bezug auf sein übergeordnetes Element, positioniert ein Element in Bezug auf das Browserfenster, positioniert ein Element in Bezug auf seine ursprüngliche Position und positioniert ein Element mit einem Element mit Respekt auf die Bildlaufposition des Benutzers. Die Positionseigenschaft und ihre verschiedenen Werte werden in dieser Beschreibung mit Hilfe von Beispielen veranschaulicht.