Bei der Entwicklung einer Anwendung muss die Position der Komponenten für ein besseres Layout angemessen sein. Zum Beispiel wird die Navigationsleiste hauptsächlich oben in der Anwendung festgelegt, und die Seiteninformationen werden auf jeder Seite des Dokuments festgelegt, hauptsächlich oben, links oder rechts. Insbesondere erlaubt das CSS Sie, das zu verwendenPosition”Eigenschaft mit dem Wert“FestSo setzen.

In diesem Blog wird erörtert:

• Was ist CSS “Position" Eigentum?
• So erstellen Sie ein festes Positionselement mit CSS?

Was ist CSS -Position "Position"?

Das CSS “PositionDie Eigenschaft wird verwendet, um die Position des Elements auf der Anwendung festzulegen. Die verschiedenen Werte, die mit der CSS -Positionseigenschaft verbunden sind, sind “statisch","absolut","relativ","Fest", Und "klebrig”.

Diese Eigenschaftswerte können mit den anderen Offset -Eigenschaften festgelegt werden, wie z. B. “Spitze","links","Unterseite", Und "Rechts”In CM, PX und mehr. Diese Offsets passen die Position der Elemente auf der Seite an.

So erstellen Sie ein festes Positionselement mit CSS?

Fügen Sie in HTML das DIV -Element mit der Klasse hinzu “hauptsächlich”. Platzieren Sie im Div -Element das Element, das den folgenden Attributen zugeordnet ist:

• “srcWird verwendet, um den Link des Bildes anzugeben.
• “Klasse”Attribut -Zugriff auf das Bild in CSS oder JavaScript mit dem angegebenen Namen.
• “AltDas Attribut wird verwendet, um einen alternativen Text anzugeben, der angezeigt wird, wenn das Bild auf der Seite nicht geladen wird.

Dann ein DIV -Element mit dem Klassennamen “Inhalt”Wird hinzugefügt, der die hält

Und

Elemente für die Überschrift bzw. den Absatz:

Die CSS -feste Positionierung

Hallo LinuxHint -Team!

Gehen wir zum CSS -Abschnitt, um die genannten HTML -Elemente zu dekorieren.

Stil „alle“ Elemente

*
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;

Das Sternchen " * „Symbol wird verwendet, um alle Elemente auszuwählen. Alle Elemente in HTML werden mit dem angewendetSchriftfamilie”Eigenschaft mit dem Wert als"Verdana, Genf, Tahoma, serifenlos”. Diese Liste der Stile wird bereitgestellt, um sicherzustellen, dass andere, wenn der Browser den ersten Wert unterstützt, andere angewendet werden.

Stil „Heim“ div

.heim
Position: fest;
Oben: 35px;
links: 16px;

Die für das Divelelement angewendeten Eigenschaften “heimWerden unten beschrieben:

• “Position”Wird angegeben, um die Position des Elements anzugeben. Der Wert "FestStellen Sie die Position des Elements an der spezifischen Stelle fest.
• “SpitzeIst die Eigenschaft, um die Position des Elements von oben anzupassen.
• “linksDie Eigenschaft wird verwendet, um die Position des Elements von links anzupassen.

Stil „Inhalt“ div

.Inhalt
Hintergrundfarbe: CadetBlue;
Breite: 300px;
Höhe: 350px;
Padding-Links: 40px;
Rand-Links: 80px;

Die CSS -Eigenschaften, die auf das Div -Element mit dem Klassennamen angewendet werden “hauptsächlich" unten genannten:

• “Hintergrundfarbe”Wird angegeben, um die Hintergrundfarbe des Elements festzulegen.
• “BreiteEigenschaft definiert die Breite des HTML -Elements.
• “HöheEigenschaft definiert die Höhe des HTML -Elements.
• “Padding-LinksDie Eigenschaft wird zum Hinzufügen des Platzes links vom Inhalt des HTML -Elements verwendet.
• “linksDie Eigenschaft legt Platz links vom DIV -Element fest.

Ausgang

Es kann aus dem oben angegebenen Ergebnis beobachtet werden, dass die Bildposition am Browserfenster unter „35px“ von oben und „16px“ von links fixiert ist.

Abschluss

Das CSS “Position"Eigenschaft ist mit dem Wert verbunden"Fest”Wert, um die Position des Elements auf einen Punkt festzulegen. Darüber hinaus wird diese Eigenschaft mit ihren Offseteigenschaften wie unten, oben, rechts und links angepasst. Dieser Blog hat die Methode gezeigt, um die feste Position des Elements in CSS mit einem praktischen Beispiel zu gestalten.