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 positioning?
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!
