How To Use CSS Position

Welcome friends!

As you know in the previous we discussed about the float what is float? And how to use them and solve other problems related to the float. You can contort the layout by the float property but there is another important property which is called css position. In this tutorial we are going to explore css positioning. Css positioning is another important property to controlling the layout.

What is css position?

Css position property is used to control the flow of elements in the webpage or position the element on the webpage. With the help of position property you can position the element on the page where you want.

Static position

In css position static is the default value it is not affected by the left, right, top, and bottom.

NOTE

To set up the position you must define the position property .

Example without using static position:

.box1{
width:150px;
height:150px;
background-color:#0000A0;
}

 .box2{
 width:150px;
height:150px;
background-color:#FF0000;
  }

  .box3{
  width:150px;
height:150px;
background-color:#00FF00;
   }

Example with using static position:

.box1{
position:static;
right:20px;
width:150px;
height:150px;
background-color:#0000A0;

 }
 .box2{
 position:static;
 top:10px;
 width:150px;
height:150px;
background-color:#FF0000;
  }
  .box3{
  position:static;
  left:100px;
   width:150px;
height:150px;
background-color:#00FF00;
   }

Now you can see there is no difference between using static position property or not and other thing is that it is not affected by the left, right, top and bottom.

RELATIVE POSITION

Css position relative behave like static position but it is affected by top, bottom, left and right but the static position is not affected by these properties.

                                                                                                         

EXAMPLE NO:1

.box1{
position:relative;
width:150px;
height:150px;
background-color:#0000A0;

 }
 .box2{
position:relative;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
  position:relative;
   width:150px;
height:150px;
background-color:#00FF00;

  }

In the above example you can see the relative position is behaving like static position.

EXAMPLE NO:2

.box1{
position:relative;
width:150px;
height:150px;
background-color:#0000A0;
}
 .box2{
position:relative;
left:200px;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
  position:relative;
   width:150px;
height:150px;
background-color:#00FF00;
   }

In the above example you can see how the second box is affect by the adding of left position property.

NOTE

In the relative positioning all element affected by it so while using relative position be careful. Absolute property is very useful to avoid these problems.

Css Absolute Position

Css position absolute is the best way of positioning element. With the absolute position you can place the where you want it does not affect the other element on the page that’s why this property of position is very useful.

EXAMPLE

.box1{
position:absolute;
top:0px;
left:200px;
width:150px;
height:150px;
background-color:#0000A0;
 }
 .box2{
width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
width:150px;
height:150px;
background-color:#00FF00;
   }

In the above example you can observe that after adding the absolute position to the first box it is not affected other elements.

POSITION FIXED

Css position fixed is always stay at one place it moves with the scrolling of the page.

EXAMPLE

#topnav {
            background-color:#262626;
            width:100%;
            height:50px;
           position:fixed;
           top:0px;}

In the above screen shot you can see the navbar on the top which has fixed position.

Z-INDEX

This property very useful in some condition when you apply position to the element it overlap the other element to solve this problem we use z-index css property.

EXAMPLE before applying z-index

.box1{
position:absolute;
top:0px;
left:200px;
width:150px;
height:150px;
background-color:#0000A0;
}
 .box2{
position:absolute;
left:210px;
top:20px;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
 width:150px;
height:150px;
background-color:#00FF00;
   }

In the above example you can see how the boxes overlapping each other and now it is your wish which element you want in the front and the which one in the behind.

EXAMPLE after applying z-index

.box1{
position:absolute;
top:0px;
left:200px;
z-index:1;
width:150px;
height:150px;
background-color:#0000A0;

 }
 .box2{
position:absolute;
left:210px;
top:20px;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
width:150px;
height:150px;
background-color:#00FF00;
   }

CONCLUSION

After the understanding of positioning now you can design the beautiful layouts with the help of positioning.

Pleaser remember me in your prayer and share our post with your friends. Thanks!