Difference Between Relative, Absolute and Fixed Positioning

If you are a web developer/webmaster, it is imperative that you understand positioning and know how relative, absolute and fixed positioning works. In this post, I will try to briefly explain how they work so that you can see the differences and use them correctly in your page design.

Relative Positioning

Every element on a web page has static positioning by default. It means that element will flow in the page as it normally would.

What relative positioning means is “relative to itself”. If you set “position: relative;” on an element but no other positioning attributes like top, left, bottom or right, it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as “position: static;” or set no positioning at all. But if you were to give it other positioning attributes, then it will shift it’s position from where it would normally be.

For example if you set an element to have relative positioning and set “left: 25px;”, then the element would be shifted to the right 25 pixels from where it would normally be.

Absolute Positioning

This positioning allows you to place any page element exactly where you want it. You set absolute positioning and use the positioning attributes top, left bottom and right to set the precise location. These values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default to the “html” element itself which means it will be placed relatively to the page itself. Absolutely positioned elements don’t affect the flow of other elements on the page and other elements don’t affect them.

Fixed Positioning

A fixed positioned element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

Consider you set an element to have fixed position and say “top:25px;”. No matter how much you scroll the page, this element will always be displayed at a distance of 25 pixels from the top of the viewport.

Hope this helps.
Take action against hunger,

Leave a Reply

Your email address will not be published. Required fields are marked *