Shift Text Using CSS

  1. Shift Text Using Relative Positioning in CSS
  2. Shift Text Using Absolute Positioning in CSS

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

InDesign - How To Change Text Align...
InDesign - How To Change Text Alignment

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 Jay from India.
        </div>
    </body>
</html>

Output:

Relative Output

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 Jay from India.
        </div>
    </body>
</html>

Output:

Absolute Output