CSS Position Property

CSS position properties allow you to position an element. Using this property and values you can decide which element to display in front.

Elements can be positioned using top,bottom,left and right properties. These properties will not work unless you set the position property which is depending on the position methods.

There are four different methods.

1.Static position:

By default HTML elements are positioned as static. A static positioned element is always positioned according to the normal flow of the page.

2.Relative position:

A relative positioned element is positioned relative to its normal position. Elements which positioned relatively can be moved and overlap other elements, but the space reserved for the element is preserved in the normal flow.

3.Absolute Position:

An absolute position element is positioned where the first parent element is positioned as relative. If no such element is found, the containing block is < html >

4.Fixed position:

An element with position fixed is positioned based on the browser window. It will not move even if the window is scrolled.

Example:

style.css:

         .box1{

background:#F00;

border:2px solid #FF0;

position:static;

}

.box2{

background:#00F;

border:2px solid #0FF;

position:relative;

left:50px;

}

.box3{

background:#FF0;

border:2px solid #FF0;

position:absolute;

right:0;

bottom:0;

border-radius:50%;

width:40px;

height:40px;

}

.box4{

background:#666;

border:2px solid #06F;

position:fixed;

}

position.html

    < div class="box1" > < /div >

    < div class="box2" > < div class="box3" > < /div > < /div >

    < div class="box4" > < /div >

Overlapping Elements:

Elements can overlap other elements when elements are positioned outside the normal flow.

The z-index property specifies the stack order of an element (which element should be placed in front of,or behind, this others).

The overlapping values can have a positive or negative stack order.

Example:

     box{

          position: absolute;

          left:0px;

          top:0px;

         z-index:-1

       }