Normal Flow
In an html document, each element is viewed by the browser as a block of information. There are inline level elements like <em> and <span> that do not cause a line break. Then there are block level elements like <p> and <div>, elements that default to 100% available screen width and do cause a line break. The browser sees each block level element as a separate box, and stacks all of these boxes one on top of the other in the order that they are found in the document.
Positioning has to do with changing an object’s relationship to the normal flow. There are 4 different positioning schemes in CSS: static, absolute, relative and fixed.
Static Positioning
This is actually the default setting, wherein the element flows along in the normal way. This is not used that much except to reset an object’s positioning if it should inherit that attribute from its parent.
Absolute Positioning
When you absolutely position an element, you literally tell it where to go in relation to its container object down to the pixel. Absolutely positioned elements use the last positioned parent as its frame of reference. That is why we assign a position to wrapper divs: if we did not, the divs inside of it would use the html element as their reference.
When you absolutely position an element, you take it out of the normal flow. That element no longer has any effect on its siblings.
Relative Positioning
Relative positioning is not used very much–it is mainly used to assign a position to container divs in order to qualify them to be the frames of reference for any positioned elements within them.
When you use relative positioning on an element, it is NOT taken out of the normal flow even if you reposition it. That means the space it normally would take up does not change and all the sibling elements flow around the space as usual.
Fixed Positioning
This type pulls the element out of the normal flow. A fixed position element uses the browser as its reference so no matter how big or small the window gets, the element stays in its assigned position.
Z Index
If you want your divs to overlap, use the Z Index attribute. If you want one object to sit on top of the others, assign it z-index: 1. SInce the default is zero, that object will sit on top. If you want something to sit on top of that object, use z-index:2. The higher the index, the closer the div will be to the front of the page.
Articles I used to write this lesson:
Integrated Web Design: Position This! CSS Positioning Demystified By Molly E. Holzschlag, Aug 6, 2004
CSS Layout by Ross Shannon
CSS Positioning by Mike Hall
