50 100 150 200 250 300 350 400 450 500

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;
}