Positioning in CSS

What are the differences between relative, absolute, and fixed?

Positioning in CSS requires a position value to be set on an element before it can be moved to it's final location. The position property is used to set how an element is positioned in the document, and effects how it responds to top, bottom, left and right properties.

Relative

The value relative causes the element to be positioned in its normal position unless other positioning attributes are used. When position: relative is used with other positioning properties (for example left), the element's position will shift relative to its original position.

For example:

position: relative;

left: 30 px;

would result in the elements position being shifted 30px to the left.

Absolute

Absolute position removes the element from the normal flow of the page and it can overlap with other elements. Because of this it can make responsive design difficult. Absolute positioning places an element relative to a position:relative element.

For example:

position: absolute;

top: 0;

would position the element at the top of the parent

Fixed

Fixed position places an element relative to the browser window. When the window is scrolled, the element stays in the same place. This might be used for something you would like to remain visable at all times, like a navigation bar.