Default positioning - static - goes where it goes (.box1)
Introducting relative positioning, the box is 'relative' to it's natural location on the page. We have placed it at (50, 0) - that is 50 pixels from the left and 0 pixels from the top (.box2).
Introducing a box inside another box. The outer box is given relative positioning (.box3). The inner box is positioned absolutely (.box4). It is at position (10,10) inside the outer box.
Introducing a box that is absolutely positioned - in this case relative to the page (.box5). The box is at (200, 350) from the page origin.
Introducing a box whose position is fixed - in this case relative to the page. The box is at (0, 400) from the page origin (.box6).
box1{
border:1px solid #000;
width:50px;
height:50px;
background:#888;
float:left;
margin-bottom:50px;
}
box2{
position:relative;
left:50px;
}
box3{
position:relative;
}
box4{
width:20px;
height:20px;
background:#CCC;
}
box5{
position:absolute;
left:200px;
top:400px;
}
box6{
position:fixed;
left:0px;
top:450px;
}