Category Covered

css positioning static absolute relative


The CSS positioning is a CSS properties thats allow us to position an element such as a table or a image or a div. Using this properties we can also fix position of a content when it is too big.

There are four position available such as top, bottom, left, and right that elements can be posiioned. To positioned our element in this four position we can use
four different positioning methods. They are :

1.Static Position : The default position for all HTML element is a static position.It is positioned according to the page content size.Normally we dont need to  specify this
position,unless we want to override a position which is set previously.

Ex:     #div
    {

    position:static

    }


   
2.Fixed Position: Fixed position is a position which make element relative to the browser window.The HTML element will not move if the window is scrolled.


Ex:#div
    {
    position:fixed;
    top:20px;
    left:10px;
    }

3.Relative Position:A relative positioned is a positioned where HTML element relative to its normal position.In this position element can be moved and also overlap to other position.
    div.Pleft
    {
    position:relative;
    left:-10px;
    }
    div.Pright
    {
    position:relative;
    left:10px;
    }
4.Absolute Position: A absolute position is the exat position for a HTML element where we want to place our element. If we want to place a div-A on to the top right of another div-B then we can use Absulate position on div-B and Reletive positioning on div-A.

Ex:#div
    {
     position:absolute;
     top:0;
     right:0;
    }

 
Posts you may like
 
Top 15 Posts
Google+