Relative Vs Absolute Position

Building multiple websites and seeing a lot of other peoples code, I see how people use and miss use the property position in CSS. In particular it is between using relative and absolute positioning of the elements. They both have their place, but where is it?

The worst mistake I have seen is when developers over use absolute. I have seen when they want everything to be exactly where it is meant to be on a desktop design, and so they have position absolute everything into position. This is terrible, as the element then do not move well for responsive builds. One website I saw used all position absolute and then when they made the responsive it had about 20 media queries in the CSS. This was to move the elements 2px at each point. When you use the absolute position you are committing to the element being in that position no matter what. When you use position the code should be contextual and then should flow relative to each other. Over using or miss using the position absolute will result in more work later and restricting you to create better elements.


(adsbygoogle = window.adsbygoogle || []).push({});

The best position, which most elements inherit, is the relative. This is how you do responsive and fluid builds. It says it all in the name relative, you want the elements to react to each other, so you want them relative to each other. As one element comes in the  other one reacts to that and moves as well. This will work for about 90% of the structure of the code.

Though this is all said position absolute has it’s place. When you wish something to absolutely be in a position then it can work, but in a relative container. You may have for example a view button on a item and want to have consistency across all the items. To make the button fixed to the bottom and all inline then you can use position absolute so it sticks to the bottom. You do have to make sure you remember the relative container or it will be absolute to the window and not work.

Use relative and absolute but wisely.

Published by Chris Pateman - PR Coder

A Digital Technical Lead, constantly learning and sharing the knowledge journey.

Leave a message please

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: