Décaler le texte à l'aide de CSS

Jay Singh 20 février 2023

CSS CSS Shift

Décaler le texte en utilisant le positionnement relatif dans CSS
Décaler le texte en utilisant le positionnement absolu dans CSS

CSS facilite le positionnement des éléments HTML. Tout élément HTML peut être placé n’importe où sur la page.

Vous pouvez choisir si l’élément doit être positionné par rapport à la position naturelle de la page ou absolu par rapport à son élément parent. Vous pouvez maintenant déplacer votre texte sur la page comme bon vous semble.

En utilisant la propriété position et les deux valeurs top et left, vous pouvez déplacer un élément de texte HTML n’importe où sur la page.

Si vous devez déplacer le texte vers la gauche, utilisez une valeur négative pour la propriété left.
Si vous devez déplacer le texte vers la droite, utilisez une valeur positive pour la propriété left.
Si vous devez déplacer le texte vers le haut, utilisez une valeur négative pour le top.
Si vous devez déplacer le texte vers le bas, utilisez une valeur positive pour le top.

Décaler le texte en utilisant le positionnement relatif dans CSS

Dans cet exemple, le positionnement relatif décale la position de l’élément de texte par rapport à l’endroit où il s’affiche généralement. Avec l’augmentation ou la réduction de la valeur, vous pouvez déplacer l’élément de texte.

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

Décaler le texte en utilisant le positionnement absolu dans CSS

Avec position: absolute, les coordonnées d’un élément sont relatives au coin supérieur gauche de votre écran.

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