Computer >> Computer tutorials >  >> Programming >> CSS

Relative Positioning with CSS

Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position.

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

  •  Move Left - Use a negative value for left.
  •  Move Right - Use a positive value for left.
  •  Move Up - Use a negative value for top.
  •  Move Down - Use a positive value for top.

Example

You can try to run the following code to implement relative positioning −

<html>
   <head>
   </head>
      <body>
         <div style = "position:relative;left:80px;top:2px;background-color:yellow;">
            This div has relative positioning.
         </div>
      </body>
</html>