Die Position der HTML -Elemente spielt eine wichtige Rolle bei der Organisation der Webseitenkomponenten. Insbesondere kann die Position der Elemente durch Verwendung der CSS eingestellt werdenPosition" Eigentum. Diese Eigenschaft kann mit Offseteigenschaften wie oben, links, rechts und unterer Eigenschaften zugeordnet werden, wobei spezifische Werte zur Anpassung des Elements auf der Seite bereitgestellt werden. Allerdings das “absolut”Positionierte Elemente können relativ zum nächstgelegenen positionierten Element eingestellt werden.

Dieser Beitrag erklärt die absolute CSS -Positionierung.

CSS -Position „Position“

Der "PositionDie Eigenschaft in CSS kann verwendet werden, um die Position des Elements anzupassen. Unterschiedliche Werte der Positionseigenschaft sind fest, absolut, relativ, statisch und klebrig. Diese Werte werden mit den Offset -Eigenschaften wie oben, rechts, links und unten eingestellt, um die Position des Elements anzupassen.

So wenden Sie CSS absolute Positionierung an?

Die absolute Positionierung des Elements kann mit dem CSS angewendet werden “Position”Eigenschaft mit dem Wert“absolut”. Das Element mit der absoluten Position wird eingestellt, was dem nächstgelegenen positionierten übergeordneten Element entspricht. Wenn der Vorfahr jedoch nicht positioniert ist, passt er sich relativ zum Körperabschnitt des Dokuments an.

Beispiel

Lassen Sie uns das Konzept mit einem praktischen Beispiel verstehen.

Schritt 1: Erstellen Sie eine HTML -Datei

Fügen Sie in der HTML -Datei im Körperelement einen Div mit dem Klassennamen hinzu “hauptsächlich”. Fügen Sie dann innerhalb der erstellten DIV ein HTML -Tag hinzu, das den folgenden Attributen zugeordnet ist:

• • “src”Bietet einen Link zum Bild.
  • “Klasse”Wird im CSS verwendet, um die Elemente zu stylen.
  • “AltAttribut gibt den Text an, der anstelle des Bildes angezeigt wird, wenn das Bild auf der Seite nicht geladen wird.
  • “AltDas Attribut gibt den Text an, der auf der Seite des Bildes angezeigt wird, wenn das Bild auf der Seite nicht geladen wird.

Fügen Sie dann ein weiteres DIV hinzu, das die H1- und P -Elemente des Überschriftens und Absatzes enthält:

Die CSS absolute Positionierung

Hallo LinuxHint -Team!

In CSS werden mehrere Styling -Eigenschaften verwendet, um die HTML -Elemente zu dekorieren.

Schritt 2: Stil „alle“ Elemente

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

Die HTML -Elemente werden mit der "gestaltet"Schriftfamilie”Eigenschaft mit dem Wert“Verdana, Genf, Tahoma, Sans-Serif”. Diese Werteliste stellt sicher, dass der andere angewendet wird, wenn der Browser den ersten Stil nicht unterstützt, der andere angewendet wird.

Schritt 3: Stil „Home“ Div

.heim
Position: absolut;
Top: 50px;
links: 45px;

Im Folgenden finden Sie die Eigenschaften, die auf die angewendet werdenheim”Div:

• • “PositionEigenschaft legt die Position des Elements fest. Hier, die hinzugefügte “absolut”Wird das Element relativ zum Körperabschnitt der HTML platzieren.
  • “SpitzeDie Eigenschaft wird für die vertikale Anpassung des Elements verwendet.
  • “linksEigenschaft wird für die horizontale Einstellung des Elements verwendet.

Schritt 4: Stil "Inhalt" Div

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

Im Folgenden finden Sie die CSS -Eigenschaften, die auf das angewendet werdenInhalt”Div:

• • “HintergrundfarbeDie Eigenschaft legt die Hintergrundfarbe des Elements fest.
  • “BreiteEigenschaft legt die Breite des Elements fest.
  • “HöheEigenschaft legt die Höhe des Elements fest.
  • “Padding-LinksDie Eigenschaft wird so eingestellt, dass die linke Seite des Inhalts des Elements Platz hinzufügt.
  • “linksEigenschaft gibt den Raum auf der linken Seite des Elements an.

Zu diesem Zeitpunkt sieht unsere Webseite so aus:

Aus dem obigen Ergebnis ist ersichtlich, dass das Bild des DIV -Hauses von oben und 45px von links vom Körper des Dokuments platziert ist. Darüber hinaus ist die Position des Heim -DIV relativ zum Körperabschnitt der HTML festgelegt.

So stellen Sie die Position des Elements „relativ“ an positionierte übergeordnete Elemente an?

In diesem Abschnitt werden Sie die Position des Elements relativ zum übergeordneten Element der nächsten Position anpassen.

Stellen Sie die Eigenschaft "Position" von "Content" Div fest

Position: Relativ;

Um die Position des Elements relativ zum übergeordneten Element anzupassen, setzen Sie die “Position"Eigenschaft des übergeordneten Elements zu"relativ" Wert.

Stellen Sie die Eigenschaft "Position" des "IMG" -Elements fest

.heim
Position: absolut;
Oben: 100px;
links: 220px;

Hier:

• • “Position”Eigenschaft mit dem Wert als"absolut”Wird relativ zum übergeordneten Element positioniert (dh inhaltliche Div -Position wird mit dem Wert Relativs festgelegt).
  • “SpitzeDie Eigenschaft wird verwendet, um die Elementposition von oben festzulegen.
  • “linksDie Eigenschaft wird verwendet, um die Elementposition von links festzulegen.

Ausgang

Aus dem Ergebnis ist ersichtlich, dass das Bild relativ zu seiner übergeordneten DIV positioniert wurde und es geeignet aussieht.

Abschluss

Das CSS “PositionDie Eigenschaft wird verwendet, um die Position der HTML -Elemente festzulegen. Diese Eigenschaft kann als fest, relativ, absolut, klebrig und statisch bewertet werden. Der "absolutDer Wert positioniert das Element, das seinem nahe gelegenen positionierten übergeordneten Element entspricht. Dieser Beitrag hat die absolute Positionierung von CSS mit einem praktischen Beispiel erklärt.