Bewegen Sie den Text mit CSS nach oben

1. Verwenden Sie die CSS-Eigenschaften position und bottom, um den Text nach oben zu verschieben
2. Verwenden Sie die CSS-Eigenschaft margin-top, um den Text nach oben zu verschieben

Manchmal platzieren wir bei der Entwicklung von Webseiten die Texte unten oder in der Fußzeile, sodass wir möglicherweise einen Platz unter dem Text lassen und den Text nach oben verschieben müssen. Wir werden lernen, wie man den Text von unten auf der Webseite nach oben bewegt.

Verwenden Sie die CSS-Eigenschaften position und bottom, um den Text nach oben zu verschieben

Im folgenden Beispiel haben wir das Element <div> erstellt, das wir anhand des Klassennamens bottom-text identifizieren können. Innerhalb des <div>-Elements haben wir das <h3>-Element mit etwas Text hinzugefügt und ihm eine text-Klasse zugewiesen.

Im CSS-Code haben wir dem Element <div> position: absolute gegeben, um es relativ zu seinem übergeordneten Element, dem Dokument selbst, zu verschieben. Außerdem haben wir margin-top: 90vh angegeben, das das Element <div> mit dem Klassennamen bottom-text am Ende der Webseite platziert.

Wir haben der Klasse text etwas CSS hinzugefügt, um den Text von seiner aktuellen Position nach oben zu verschieben. Hier haben wir als Wert der Eigenschaft position relative gewählt, wodurch wir den Text relativ zu seiner Position verschieben können.

Um den Text nach oben zu verschieben, haben wir die Eigenschaft bottom verwendet, die den Text um 60 Pixel nach oben verschiebt, da wir diesen Wert zugewiesen haben. Benutzer können auch den Wert der Eigenschaft unten ändern und den Text um verschiedene Beträge nach oben verschieben.

Wenn Sie der Eigenschaft bottom negative Werte zuweisen, wird der Text nach unten verschoben.

HTML Quelltext:

<div class="bottom-text">
    <h3 class="text">This is the text at bottom.</h3>
</div>

CSS-Code:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    position: relative;
    bottom: 60px;
}

Im obigen Ausgabebild zeigt das linke Bild den Text an seiner ursprünglichen Position, und das rechte Bild zeigt den Text, nachdem der Text von seiner aktuellen Position nach oben verschoben wurde.

Verwenden Sie die CSS-Eigenschaft margin-top, um den Text nach oben zu verschieben

Im folgenden Beispiel haben wir die CSS-Eigenschaft margin-top verwendet, um den Text von seiner aktuellen Position nach oben zu verschieben.

Wie im obigen Beispiel besprochen, enthält dieses Beispiel auch das Element <div> mit dem Klassennamen bottom-text und das Element <h3> mit dem Klassennamen text. Wir haben den Text unten auf der Webseite gesetzt, indem wir etwas CSS zur Klasse bottom-text hinzugefügt haben.

Um den Text nach oben zu verschieben, wenden wir die Eigenschaft margin-top auf die Klasse text an und weisen ihr den negativen Wert zu. Wenn Sie einen positiven Wert für die Eigenschaft margin-top festlegen, wird der Text um den Wertbetrag nach unten verschoben.

HTML Quelltext:

<div class="bottom-text">
    <h3 class="text">This text will be shown at the bottom.</h3>
</div>

CSS-Code:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    margin-top:-100px;
}

Der negative margin-top-Wert ist der beste Weg, um Text oder ein beliebiges HTML-Element von seiner aktuellen Position nach oben zu verschieben.