How to Shift Text Using CSS

  2. HowTo
  3. CSS Howtos
  4. How to Shift Text Using CSS
Jay Singh Feb 02, 2024
CSS CSS Shift
  1. Shift Text Using Relative Positioning in CSS
  2. Shift Text Using Absolute Positioning in CSS
How to Shift Text Using CSS

CSS aids the positioning of HTML elements. Any HTML element can be placed anywhere on the page.

You can choose whether the element should be positioned relative to the page’s natural position or absolute to its parent element. You can now move your text about the page as you see fit.

Using the position property and the two values top and left, you can move an HTML text element wherever on the page.

  • If you have to move the text left, use a negative value for the left.
  • If you have to move the text right, use a positive value for the left.
  • If you have to move the text up, use a negative value for the top.
  • If you have to move the text down, use a positive value for the top.

Shift Text Using Relative Positioning in CSS

In this example, relative positioning shifts the text element’s position relative to where it typically displays. With the increase or reduction of the value, you can shift the text element.

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

Shift Text Using Absolute Positioning in CSS

With position: absolute, an element’s coordinates are relative to the top-left corner of your screen.

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