position
position is a CSS property that controls where items appear in the window.
position is often used with top and left.
The values for the position property are:
- static
- relative
- absolute
- fixed
static is the default positioning of objects in the document flow.
relative positioning renders an object as it would in the normal flow, then offsets it a specified amount.
absolute positioning renders an object offset from the top left of the browser window (unless the parent is position: relative, then it is offset from the parent). Objects with absolute positioning are outside the flow.
fixed positioning renders an object like absolute, but it stays in place once rendered (IE ignores this value).
Let's play with some sample code.