Die Position der HTML-Elemente spielt eine entscheidende Rolle bei der Organisation der Webseitenkomponenten. Genauer gesagt kann die Position der Elemente angepasst werden, indem das CSS „ Position ' Eigentum. Diese Eigenschaft kann Offset-Eigenschaften zugeordnet werden, z. B. den Eigenschaften top, left, right und bottom, die spezifische Werte zum Anpassen des Elements auf der Seite bereitstellen. Allerdings ist die „ absolut ” positionierte Elemente können relativ zum nächsten positionierten Element angepasst werden.
In diesem Beitrag wird die absolute CSS-Positionierung erläutert.
CSS-Eigenschaft „position“.
Das ' Position ”-Eigenschaft in CSS kann verwendet werden, um die Position des Elements anzupassen. Unterschiedliche Werte der Positionseigenschaft sind fest, absolut, relativ, statisch und fest. Diese Werte werden mit den Offset-Eigenschaften wie oben, rechts, links und unten festgelegt, um die Position des Elements anzupassen.
Wie wende ich die absolute CSS-Positionierung an?
Die absolute Positionierung des Elements kann über das CSS „ Position „Eigenschaft mit dem Wert“ absolut “. Das Element mit der absoluten Position wird entsprechend dem am nächsten positionierten Elternelement angepasst. Wenn der Ancestor jedoch nicht positioniert ist, wird er relativ zum Hauptteil des Dokuments angepasst.
Beispiel
Lassen Sie uns das Konzept anhand eines praktischen Beispiels verstehen.
Schritt 1: Erstellen Sie eine HTML-Datei
Fügen Sie in der HTML-Datei innerhalb des body-Elements ein div mit dem Klassennamen „ hauptsächlich “. Fügen Sie dann innerhalb des erstellten div ein HTML- -Tag hinzu, das den folgenden Attributen zugeordnet ist:
-
- „ Quelle “ bietet einen Link zum Bild.
- „ Klasse “ wird im CSS verwendet, um die Elemente zu stylen.
- „ alles ”-Attribut gibt den Text an, der anstelle des Bildes angezeigt wird, wenn das Bild nicht auf der Seite geladen werden kann.
- „ alles ”-Attribut gibt den Text an, der anstelle des Bildes auf der Seite angezeigt wird, wenn das Bild nicht auf die Seite geladen werden kann.
Fügen Sie dann ein weiteres div hinzu, das die h1- und p-Elemente der Überschrift und des Absatzes enthält:
< div Klasse = 'hauptsächlich' >< div Klasse = 'Inhalt' >
< Bild Quelle = 'images/linuxlogo.png' Klasse = 'Zuhause' alles = 'Linux-Logo' Breite = '80px' >
< h1 > Die absolute CSS-Positionierung h1 >
< p > Hallo Linuxhint-Team ! p >
div >
div >
In CSS werden mehrere Stileigenschaften verwendet, um die HTML-Elemente zu dekorieren.
Schritt 2: Gestalten Sie „alle“ Elemente
* {Schriftfamilie: Verdana, Geneva, Tahoma, serifenlos;
}
Die HTML-Elemente werden mit dem „ Schriftfamilie „Eigenschaft mit dem Wert“ Verdana, Genf, Tahoma, serifenlos “. Diese Werteliste stellt sicher, dass, wenn der Browser den ersten Stil nicht unterstützt, der andere angewendet wird.
Schritt 3: Stil „home“ div
.Zuhause {Position: absolut;
oben: 50px;
links: 45px;
}
Nachfolgend sind die Eigenschaften aufgeführt, die auf „ Zuhause ” div:
-
- „ Position ”-Eigenschaft legt die Position des Elements fest. Hier der Zusatz „ absolut “ platziert das Element relativ zum Hauptteil des HTML-Codes.
- „ oben ”-Eigenschaft wird für die vertikale Ausrichtung des Elements verwendet.
- „ links ”-Eigenschaft wird für die horizontale Ausrichtung des Elements verwendet.
Schritt 4: Stil „Inhalt“ div
.Inhalt {Hintergrundfarbe: kadettblau;
Breite: 300px;
Höhe: 250px;
Polsterung links: 40px;
Rand links: 80px;
}
Nachfolgend sind die CSS-Eigenschaften aufgeführt, die auf die „ Inhalt ” div:
-
- „ Hintergrundfarbe ”-Eigenschaft legt die Hintergrundfarbe des Elements fest.
- „ Breite ”-Eigenschaft legt die Breite des Elements fest.
- „ Höhe ”-Eigenschaft legt die Höhe des Elements fest.
- „ Polsterung-links ”-Eigenschaft ist so eingestellt, dass auf der linken Seite des Inhalts des Elements Platz hinzugefügt wird.
- „ Rand links ”-Eigenschaft gibt den Platz auf der linken Seite des Elements an.
Zu diesem Zeitpunkt sieht unsere Webseite wie folgt aus:
Aus dem obigen Ergebnis ist ersichtlich, dass das Bild des div-Homes 50 Pixel von oben und 45 Pixel von der linken Seite des Dokumentkörpers entfernt platziert wird. Darüber hinaus wird die Position des Home-Div relativ zum Body-Abschnitt des HTML-Codes festgelegt.
Wie kann die Position des Elements „relativ“ zum positionierten übergeordneten Element angepasst werden?
In diesem Abschnitt erfahren Sie, wie Sie die Position des Elements relativ zum übergeordneten Element mit der nächsten Position anpassen.
„Position“ setzen Eigenschaft von „Inhalt“ div
Position: relativ;
Um die Position des Elements relativ zum übergeordneten Element anzupassen, setzen Sie das „ Position ” Eigenschaft des übergeordneten Elements zu “ relativ ' Wert.
Legen Sie die „position“-Eigenschaft des „img“-Elements fest
.Zuhause {Position: absolut;
oben: 100px;
links: 220px;
}
Hier:
-
- „ Position ” Eigenschaft mit dem Wert festgelegt als “ absolut ” wird relativ zum übergeordneten Element positioniert (d. h. die div-Position des Inhalts wird mit dem Wert relativ festgelegt).
- „ oben ”-Eigenschaft wird zum Festlegen der Elementposition von oben verwendet.
- „ links ”-Eigenschaft wird zum Festlegen der Elementposition von links verwendet.
Ausgabe
Aus dem Ergebnis ist ersichtlich, dass das Bild relativ zu seinem übergeordneten div positioniert wurde und passend aussieht.
Fazit
Das CSS „ Position ”-Eigenschaft wird verwendet, um die Position der HTML-Elemente festzulegen. Diese Eigenschaft kann als fest, relativ, absolut, fest und statisch bewertet werden. Das ' absolut ” Der Wert positioniert das Element entsprechend dem in der Nähe positionierten übergeordneten Element. Dieser Beitrag hat die absolute CSS-Positionierung anhand eines praktischen Beispiels erklärt.