Skip to content

Position Relative

position: relative Property:

If we specify that an element is position: relative;, then it is positioned relative to where it would have been.

If we specify that an element is position: relative; then we should also specify top, bottom, left, and / or right.

If we specify that an element is position: relative;, then the browser treats the rest of the elements as if the relative element were in it's original place.

<html>
   <head>
      <title> Relative Position </title>
      <link rel="stylesheet" type="text/css" href="myStyles.css" />
   </head>

   <body>
      <span class="indent250"> Indent 250 </span>
      <span class="down350"> Down 350 </span>
      <span> No Relative Positioning 1 </span>
      <p> No Relative Positioning 2 </p>
      <div> No Relative Positioning 3 </div>
   </body>
</html>

Default Positioning

.indent250 {
   position: relative;
   left: 250px;
}

.down350 {
   position: relative;
   top: 350px;
}

Relative Positioning

Question: Why does the No Relative Positioning 1 element look sooooo jacked up?

Answer The browser treats the first two <span>s as if they were in their original place. <span> tags are placed side-by-side. Therefore, the third <span> is placed immediately after where the first two <span>s would have gone.

Prev -- Up -- Next