I created one div with three different rules. One rule is position:relative, rule 2 is position:absolute and the third rule is no positioning. I gave it a top:20px left20px and I noticed that the absolute position did not move as far than the relative even though they both have the same value of top and left. So all i did was change the id in the div to one of the three rules to see how it would perform. I dont get why it moves this way. can you explain?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
#position1
{
position:relative;
width:50px;
height:50px;
background-color:red;
left:20px;
top:20px;
}
#position2
{
position:absolute;
width:50px;
height:50px;
background-color:red;
top:20px;
left:20px;
}
#regular
{
width:50px;
height:50px;
background-color:red;
}
</style>
<head>
</head>
<body>
<div id="regular">
</div>
</body>
</html>
