May 17th 2015

CSS Positions : relative

What is Position Relative, when should I use it and how?

What is Position Relative?
Relative is similar to Static except now you have access to Top, Right, Bottom, Left as well as z-index.

position: relative;
top: 50px;
right: 100px;
z-index: 5;

When should I use this?

  • Use it when you want your element to follow the page flow but you need to adjust its position relative to its original using Top, Right, Bottom and Left
  • Use it if you need to apply z-index to your element.
  • Use it if the element has a child that is Position Absolute and you want that child's size and position to be restricted within this element.

Tell me more

  • Position Relative elements follow the flow of the page meaning it will behave like a regular paragraph. It will follow its previous sibling and will be followed by its next.
  • Position Relative elements limit the scope, position and size of their children that are Position Absolute to this element.

Next stop is Position Absolute. Check it out!