How to Use CSS Positioning

As a web designer you have to set position for different elements on a web page. CSS provides four types of positioning that can be handled with many different properties. In this post we show you how to use them.

With the help of CSS positioning you can set the position of any element whether on the particular position of the screen or at the top of other element. First you have to specify the value to position property then you can set the position by using top, left, right and bottom properties of CSS.

CSS Static Positioning

Static is a default position for elements and it position the elements according the normal flow of the document.

1
2
3
4
5
#div-1 {
position:static;
}

CSS Fixed Positioning

With fixed position the element is fixed relative to browser window and not scroll even with the page scroll

1
2
3
4
5
6
7
8
9
#div-1 {
position:fixed;
top:30px;
right:5px;
}

CSS Relative Positioning

By using relative positioning you can change position relative to its normal position and mostly it is used as a container for absolutely positioned elements.

1
2
3
4
5
6
7
8
9
#div-1 {
position:relative;
top:20px;
left:-40px;
}

CSS Absolute Positioning

By using absolute positioning you can change position relative to its parent element. The element positioned absolutely can overlap other elements.

1
2
3
4
5
6
7
8
9
10
11
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}


Related posts

1 Response

By ejita karim

July 18, 2011

thanks nice tut..


Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.