CSS Positioning


With CSS boxes can be positioned anywhere on the web page. There are 4 methods: not specified; relative; absolute; and fixed. Below, we will compare each. There is no need to copy and paste the code below.


In the demonstration, 4 coloured boxes are used. In each case the HTML code is exactly the same. The only thing changed is the CSS. For completeness, here is the HTML:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>My First Web Page Using CSS</title>

<link rel="stylesheet" type="text/css" href="tutorial_m.css" />

</head>

<body>

<div id="boxb">

<p>This is box b</p>

</div>

<div id="boxc">

<p>This is box c</p>

</div>

<div id="boxd">

<p>This is box d</p>

</div>

<div id="boxe">

<p>This is box e</p>

</div>

</body>

</html>




No Positioning


If no special positioning method were to be used, the CSS for 4 coloured boxes would resemble something like this:




body {

background-color: #ffffff;

font-size:100%;

}

p {

font:1em verdana,garamond,arial,sans-serif;

}

#boxb{

background-color:green;

padding:10px;

width: 150px;

}

#boxc{

background-color:red;

padding:10px;

width: 150px;

}

#boxd{

background-color:yellow;

padding:10px;

width: 150px;

}

#boxe{

background-color:blue;

padding:10px;

width: 150px;

}




The boxes would take up their Normal positions. See the Example of Normal Positions.


Relative Position


For Relative Positioning the red CSS code below is added. Note that for demonstration purposes the top: and left: values are different for each box.




#boxb{

position:relative;

top:0px;

left:0px;

background-color:green;

padding:10px;

width: 150px;

}

#boxc{

position:relative;

top:150px;

left:150px;

background-color:red;

padding:10px;

width: 150px;

}

#boxd{

position:relative;

top:300px;

left:300px;

background-color:yellow;

padding:10px;

width: 150px;

}

#boxe{

position:relative;

top:400px;

left:600px;

background-color:blue;

padding:10px;

width: 150px;

}




With Relative Positioning the boxes take the set measurements would Relative to the their Normal positions. See the Example of Relative Positions.


Absolute Position


For Absolute Positioning the only CSS change is to replace 'relative' with 'absolute'. For demonstration purposes the top: and left: values have not changed.




#boxb{

position:absolute;

top:0px;

left:0px;

background-color:green;

padding:10px;

width: 150px;

}

#boxc{

position:absolute;

top:150px;

left:150px;

background-color:red;

padding:10px;

width: 150px;

}

#boxd{

position:absolute;

top:300px;

left:300px;

background-color:yellow;

padding:10px;

width: 150px;

}

#boxe{

position:absolute;

top:400px;

left:600px;

background-color:blue;

padding:10px;

width: 150px;

}




With Absolute Positioning the boxes take the set measurements from the top left or right of the screen, as defined by you.. See the Example of Absolute Positions.


Finally, for Fixed Positioning, which is similar to absolute, to the right of 'position:' type 'fixed'.