Layout in HTML

SRC: http://webdesign.about.com/od/advancedcss/a/aa061307.htm

Layout of elements in HTML is box based ordering, if the boxes are block(s) they are stacked one upon another, if they are inline boxes they are placed in linear\sequential fashion.

Four Layout(s)\

a) Static Layout: This is default layout using box methodology, it ignores top and all positional elements

Ex: http://jsfiddle.net/uJTSS/

b) Absolute Layout: Here the elements are completely removed from standard flow and are positioned according to positional elements from browser view port

Ex: http://jsfiddle.net/5GYPL/

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page.

c) Relative Position: Here the elements are not removed from standard flow, but they are positioned according to positional elements in the same flow from browser view port.

Ex: http://jsfiddle.net/jP3MK/

d) Fixed Layout: Fixed positioning is a lot like absolute positioning. The position of the element is calculated in the same way as the absolute model - from the sides of the view port. But fixed elements are then fixed in that location, like a watermark. Everything else on the page will then scroll past that element.

position: fixed;