CSS : Position

CSS Position
The position attribute specifies position that used for an element.

position : fixed || static || absolute || relative;
  - fixed can make the elements always show on a web page (following the document flow).
  - static is default position.
  - absolute can make an elements in any position on a web page. If absolute position overlapped the other element, the high level position will on the top.
  - relative is a normal position but add 20 pixel to the left element.

z-index : auto || number ;
  - specify level of an elements (High level will on the top).

Example Position

figure 1: Example Position

top : auto || pixels || cm || point ;
right : auto || pixels || cm || point ;
left : auto || pixels || cm || point ;
bottom : auto || pixels || cm || point ;
  - set an element's distance between edge and elements.

overflow : auto || visible || hidden || scroll ;
overflow-x : auto || visible || hidden || scroll ;
overflow-y : auto || visible || hidden || scroll ;
  - set scroll bar on the x, y or both.

Example (Fixed Header)
.divHead { 
   position: fixed; 
   top: 0px; left: 0px; 
   width: 100%; height: 50px; 
   padding: 5px 5px 5px 5px; 
   text-indent: 50px; 
   color: lightblue;
}

Example (Fixed Footer)
.divFoot { 
   position: fixed; 
   bottom: 0px; left: 0px; 
   width: 100%; height: 50px;
   padding: 5px 5px 5px 5px; 
   text-align: center; 
   color: gold;
}

CSS : Basic Attribute << Previous Chapter || Next Chapter >> CSS : Implement with JavaScrpt

Reference : http://www.w3schools.com/