There are four types of positioning in CSS. These types are static, absolute, relative, and fixed.
Static is the default type of positioning. Essentially, static positioning lays out all HTML elements from top to bottom and left to right. There is not much else to discuss about static positioning.
The remaining three types of positioning are all pretty similar, but there are a few slight differences.
Absolute positioning uses the top and left properties to place an element at any location on a page. I usually like to set elements using pixels or percent; however, there are few other measurement that are accepted. In absolute positioning, if you set the top and left style properties to zero the element is placed in the top left corner of its parent element.
Fixed positioning works the same as absolute positioning; except, the element remains at this position in the browser even if the user scrolls. I once read that fixed positioning is not supported as widely as absolute positioning; however, I am not sure if this is the case. It certainly seems to work in all of the browsers that I have used.
Relative positioning is essentially a combination of static and absolute positioning. Elements flow from top to bottom and left to right; however, top and left can also be set. In relative positioning, setting top and left to zero does not necessarily put an element in the top left corner of its parent element. Rather, it places the element where it would be positioned if static positioning were used. If left were set to 10px, the element would then be shifted 10 pixels to the right of its default static position.
Here is an example of how one might define absolute positioning for a div with the id myDiv.
#myDiv{position:absolute;top:10px; left:20px}
The values fixed and relative could also be valid substitutes for the value absolute in this example. That concludes this post about CSS positioning.
Clouded Vision 