The position property is used to assign with accuracy where in a web page an element to appear. An element may appear relative to a container element or to the browser window or can be layered on top of another. Its values are discussed as
| Value | Description |
| static | Elements renders in order, as they appear in the document flow. |
| absolute | The element is positioned relative to its first positioned (not static) ancestor element |
| fixed | The element is positioned relative to the browser window |
| relative | The element is positioned relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position |
It is used as
.top { position: absolute; top: 10px; left: 20px; }
Static positioning It is the default positioning for all elements on a web page, which means the element is not positioned and occurs where it normally would in the web page.
Absolute positioning is used to determine an element’s location by specifying a left, right, top, or bottom position in pixels, ems, or percentages. Hence a box can be placed 20 pixels from the top and 200 pixels from the left edge of the page.
Absolutely positioned elements are detached from the flow of the page as determined by the HTML code and other elements on the web page do not even know the absolutely positioned element exists. They can even disappear completely underneath absolutely positioned items, if care is not taken.
Float and absolute or fixed positioning can’t work together on the same element.
Relative positioning is used to place element relative to its current position in the HTML flow. So, giving a top value of 20 pixels and left value of 200 pixels on a relatively positioned element moves that element 20 pixels down and 200 pixels from the left from wherever it would normally appear.
Other page elements accommodate the old HTML placement of a relatively positioned element. As moving an element with relative positioning leaves a “hole” where the element would have
been. The main benefit of relative positioning isn’t to move an element, but to set a new point of reference for absolutely positioned elements that are nested inside it.
Fixed positioning. In it a fixed element is locked into place on the screen. When a visitor scrolls the page, fixed elements remain onscreen as paragraphs and headlines, while photos disappear off the top of the browser window. Fixed elements are a great way to create a fixed sidebar or replicate the effect of HTML frames, where only a certain portion (frame) of web page is always present.
Different positioning is illustrated in the figure as
| CSS Value & Code | Browser output |
| static
#div-1 { position:static; } |
 |
| relative
#div-1{ position:relative; top:20px; left:-40px; } |
 |
| absolute
#div-1a { position:absolute; top:0; right:0; width:200px; } |
 |
