CSS Is Not Simple

In CSS, there are four ways to visually position HTML elements within your web page. These are static, relative, absolute and fixed. There can be a great deal of confusion when it comes to discerning between these values, so I'd like to help clear things up.

Or perhaps not …

Absolutely relative

Relatively positioned elements are positioned relative to where they would appear if they weren't set to position:relative; a positional value which makes them relative to themselves. In other words, their position (like any other measurable position) is 'absolute', but only in terms of a relative — and, in this case, reflexive — trajectory. Elements that are positioned absolutely, on the other hand, are positioned relative to their parent elements. In other words, absolutely positioned elements have an absolute position relative to their parental relative.

Let me expand further. If I were to give an element the positional value of 'relative', then this would allow any of its decendant relatives positioned with 'absolute' to adopt an absolute position relative to the 'relative' parental relative. Descendant relatives that are positioned relatively, however, remain relative to themselves and not to their parental relatives. If the parental relative does not have a position of 'relative', then absolutely positioned descendant relatives are positioned relative to the ancestoral <body> relative, which has a position of 'static'.

Statically unfixed

'Static' elements do not have a position. If you do not want to position your element at all, you must choose position:static. Elements that are 'static' are called so because they are immobile, which allows them to move towards or away from you when using the scrollbar. Their position is fixed in one place in the document; a position to which the viewport is relative. Elements with a 'fixed' position are completely different. Unlike static elements that are fixed in one place, 'fixed' elements are free to follow you wherever you go. 'Fixed' elements are static relative to the viewport, but absolutely disregard the viewport's position relative to the document.

I hope that is all absolutely clear (relatively speaking). If you need more information on positioning in CSS, please refer to these additional resources:

For a programming language that isn't really even a programming language, CSS is not simple.