Positioning of elements inside a page could be quite tricky. Nevertheless, it is a powerful way of creating wonderful layout and it gives freedom and flexibility. I would like to explain everything you need to know in order to use the correct method to place your elements using CSS styles.
First of all, let me point out that there are four method for positioning:
- static: this is the standard way of positioning; the element will be displayed following the normal flow of your page;
- fixed: a fixed positioning will place the element in a fixed position; the element won't move even if you scroll down the page;
- relative: with a relative positioning the element will stay relative to its normal position;
- absolute: the element will be positioned relative to the first parent that has a position other than static; if there's not such element, <html> will be that element.