There are least four ways to position things using CSS. They are
- Static - default positioning, evereything is positioned according to its position in the code and the natural flow of text.
- Relative - used to nudge an element slightly from its natural position in the normal text flow. Applied to this can be top, left, bottom, or right with a % or px value. Bottom and right reverse the meaning of the positive and negative values used with top and left.
- Fixed - positions the item on the viewport regardless of size of page. Does not scroll with the page. Always in the same place on the viewport. Think of this as putting the element on the monitor screen with a post-it note. It does not move relative to the viewport it moves relative to the page. The code for this is position:fixed; the a property of top, left, bottom, or right with either a % or value. Top places the element at the top of the viewport with a positive value moving it down the viewport and a negative value moving it up the viewport. Left places the element on the left side of the viewport with a positive number moving the element toward the right and a negative number moves the element towards the left. Bottom places the element at the bottom of the viewport. With a positive value moving the element up the viewport and a negative value putting the element further down the viewport. Right places the element on the right side of the viewport. With a positive value moving the element to the right and a negative value moving the element left.
- Absolute - positions the element relative to the viewport or a positioned containing element tht is not statically positioned. If there is no containing element then it is positioned to the viewport.
Absolute positioning is usually used to fix an element inside some other element.
Fixed positioning is usually used to position things relative to the viewpost.