Here's another element of the understanding positioning thing -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind....
Position:absolute
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the page so that
it can no longer influence the size or position of any other page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from the position of
its closest PARENT *positioned*
element - in the absence of any explicitly positioned parent, this will
default to the <body> tag, which is always positioned at 0,0 in the browser
viewport.
This means that it doesn't matter where in the HTML code the layer's code
appears (between <body> and </body>), its location on the screen will not
change. Furthermore, the
space in which this element would have appeared were it not positioned is
not
preserved on the screen. In other words, absolutely positioned elements
don't take up any space on the page. In fact, they FLOAT over the page.
Position:relative
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from the flow of the
code on the page, so it will use the spot where it would have appeared
based
on its position in the code as its zero point reference. If you then
supply top, right, bottom, or left positions to the style for this element,
those
values will be used as offsets from its zero point.
This means that it DOES matter where in the code the relatively positioned
element appears, as it will be positioned in that location (factoring in
the offsets) on the screen. Furthermore, the space where this element
would
have appeared is preserved in the display, and can therefore affect the
placement of succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
-------------------
As with relative position, static positions also "go with the flow". An
element with a static position cannot have values for offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.
Position:fixed
------------------
A page element with this style will not scroll as the page content scrolls.
Support for this in elements other than page backgrounds is quirky
There are two other things you need to know:
1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
