In my last post about CSS, I had discuss about Floating, now I will discuss about positioning. The idea behind positioning is fairly simple. It allows you to define exactly where element boxes will appear relative to where they would ordinarily be—or relative to a parent element, another element, or even to the browser window itself
The properties of positioning are :
position
Values
static | relative | absolute | fixed | inherit
Initial value
static
Applies to
all elements
The values of position have the following meanings:
static
The element's box is generated as normal. Block-level elements generate a rectangular box that is part of the document's flow, and inline-level boxes cause the creation of one or more line boxes that are flowed within their parent element.
relative
The element's box is offset by some distance. The element retains the shape it would have had were it not positioned, and the space that the element would ordinarily have occupied is preserved.
absolute
The element's box is completely removed from the flow of the document and positioned with respect to its containing block, which may be another element in the document or the initial containing block (described in the next section). Whatever space the element might have occupied in the normal document flow is closed up, as though the element did not exist. The positioned element generates a block-level box, regardless of the type of box it would have generated if it were in the normal flow.
fixed
The element's box behaves as though it was set to absolute, but its containing block is the viewport itself.
