Differences between relative, absolute, and fixed positioning in CSS

12 September 2019

The position property in CSS allows us to define how an element, such as images, text, and videos, will be displayed in a document. This allows us to position elements out of the normal document flow and make them behave the way we want them to such as stacking one on top of the other or making them remain in the same place inside the browser no matter if the page is scrolled.

This allows us make more interesting layouts work and gives us more tools to make a document look the way we want it to.

We will be looking at the differences between the position values relative, absolute, and fixed as well as how we can use the attributes top, bottom, left, right to specify where exactly we want the element to be.

Relative Position

position: relative allows us to position an element relative to its default position, that is, its position based on the normal document flow.

Using only position: relative will merely make the element act as if it's static as we have not told it yet what position relative to its default position we want it to move.

This is why we need the top, bottom, left, and right attributes to specify the vertical and horizontal offset of the element relative to its default position.

For example, putting right: 10px means that our element is now 10 pixels from the right relative to its default position. Another way to think of this is that our element has been pushed on its right side towards the left by 10 pixels. Similary, top: 10px will push our element on its top side towards the bottom by 10 pixels.

Absolute Position

position: absolute allows us to position an element relative to its nearest positioned parent, that is a parent that has either a relative or absolute position attribute. If there are such positioned parent elements, then the HTML element, meaning the page itself, will be its parent.

The absolute position takes the element outside of the normal document flow and by default, places it in front of where it was previously. By taking the element out of the normal document flow, other elements will behave as if the element is not there. This means that the space it would have occupied will be taken up by the elements that are rendered after it, provided that these elements are following the normal document flow.

By using the top, bottom, left, and right attributes, we can specify the distance from the parent's sides we want our element to be positioned in.

This means that putting right: 10px will place our element 10 pixels from the right side of the closest parent element with a relative or absolute position. Similary, top: 10px will position our element 10 pixels away from that parent element's bottom side.

Fixed Position

position: fixed allows us to position an element relative to the viewport, which is the visible area of a web page that we see on our browsers. This means that the element will stay in the same position even when the page is scrolled.

position: fixed works quite similar to position: absolute in that it takes the element out of the normal document flow and by default, places it in front of where it would have been with the space element left behind being taken up by the elements that are rendered after it, provided that these elements are following the normal document flow.

The main difference is that since the element is now fixed in its position relative to the viewport, it will be visible in our browser or screen no matter how much we scroll unlike with elements with position: absolute which will become out of view once you scroll past it.

Using the top, bottom, left, and right attributes allows us to specify the distance from the viewport's we want our element to be positioned in.

This means that putting right: 10px will place our element 10 pixels from the right side of the viewport and fixes it there. Similary, top: 10px will position our element 10 pixels away from the bottom side of the viewport.

See it in action

Below is a codepen to show the differences between the relative,absolute, and fixed positions.

Click the buttons to change the position of the orange box and see what it would look like in these positions at right: 10px. All other sides are set at 0px to make it easier to see the differences. Note that the grey box is the parent element of the orange box and has a position: relative attribute.

The default is static and what it would look like if the orange box is following the normal document flow. Both the pink and blue boxes are static so you can see how the blue box moves upwards once you take the orange box out of the normal document flow by clicking either the absolute or fixed buttons.

See the Pen Relative, Absolute, and Fixed Positioning by Andria Hibe (@andria-hibe) on CodePen.