Text verschieben mit CSS

Jay Singh 20 Februar 2023

CSS CSS Shift

Verschieben Sie Text mithilfe der relativen Positionierung in CSS
Verschieben von Text mit absoluter Positionierung in CSS

CSS unterstützt die Positionierung von HTML-Elementen. Jedes HTML-Element kann überall auf der Seite platziert werden.

Sie können wählen, ob das Element relativ zur natürlichen Position der Seite oder absolut zum übergeordneten Element positioniert werden soll. Sie können Ihren Text jetzt nach Belieben auf der Seite verschieben.

Mit der position-Eigenschaft und den beiden Werten top und left können Sie ein HTML-Textelement beliebig auf der Seite verschieben.

Wenn Sie den Text nach links verschieben müssen, verwenden Sie einen negativen Wert für left.
Wenn Sie den Text nach rechts verschieben müssen, verwenden Sie einen positiven Wert für left.
Wenn Sie den Text nach oben verschieben müssen, verwenden Sie für top einen negativen Wert.
Wenn Sie den Text nach unten verschieben müssen, verwenden Sie einen positiven Wert für top.

Verschieben Sie Text mithilfe der relativen Positionierung in CSS

In diesem Beispiel verschiebt die relative Positionierung die Position des Textelements relativ zu der Stelle, an der es normalerweise angezeigt wird. Mit der Erhöhung oder Verringerung des Wertes können Sie das Textelement verschieben.

<html>
    <head>
    </head>
    <body>
        <div style = "position:relative; left:80px; top:20px; background-color:yellow;">
            Hello! I am DelftStack.
        </div>
    </body>
</html>

Verschieben von Text mit absoluter Positionierung in CSS

Bei Position: absolut sind die Koordinaten eines Elements relativ zur oberen linken Ecke Ihres Bildschirms.

<html>
    <head>
    </head>
    <body>
        <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
            Hello! I am DelftStack.
        </div>
    </body>
</html>