The world of the web designing, web development and other web design tutorials.

Slider (DO NOT EDIT HERE!)

Monday 23 June 2014

How To Use CSS Position

css positioning

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;
   }

css position

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;
   }
css positioning

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;
  }


css position
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;
   }
css position

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;
   }

css position


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;}

css position


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;
   }
z-index css

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;
   }

css z-index


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!

0 comments:

Post a Comment