Position: Relative; Examples
Position: Relative; comments
The two boxes in the example are "nested" the small red box is inside the larger box... The markup looks like this.
|--> <div id="largebox"> | <div id="smallbox"> <--| | </div> <--| |--> </div>
The arrows on the left show the div's for the large box surrounding the Div's for the small box. It is the nesting that makes the relationship, large box being the parent of the "child" small box.
However, the 'parent/child' relationship does not become "official" until you give both boxes a "position" in the stylesheet.
Because of nesting and the "parent/child" relationship, the small box uses the top left corner of the "Large" box as the (0,0) co-ordinates to calculate "top" and "left" positioning instead of the top and left of the browser.
In the next "tab" you can see the markup for the CSS and you can cut and paste the markup and tryout different properties and values...
The Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {text-align: center;}
#largebox {
text-align: left;
width:440px;
height:300px;
background-color:#CFF;
border:dotted #000000 1px ;
margin:auto;
}
#smallbox {
width:250px;
height:200px;
position: static;
background-color:#F00;
border:solid #000000 2px ;
}
</style>
</head>
<body>
<div id="largebox">
<p>This Larger box has been centered on the page.</p>
<div id="smallbox"><p>This small box is inside the large box and has the position: static;</p>
<pre> #smallbox {
width:250px;
height:200px;
position: static;
background-color:#F00;
border:solid #000 2px ;
}
</pre>
</div>
</div>
<h2>position: static;
</h2>
</body>
</html>