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!