<p>Boxes 1 to 3 are positioned according to the normal flow.</p>
<divid="box1"class="box">Box 1</div>
<divid="box2"class="box">Box 2</div>
<divid="box3"class="box">Box 3</div>
<p>Boxes 2 to 3 are positioned according to the normal flow, but box one has a position attribute with a left value of 300 pixels and a top value of 500 pixels. Because the position is absolute, it doesn't relate to any other elements on the page.</p>
<divid="box4"class="box">Box 1</div>
<divid="box2"class="box">Box 2</div>
<divid="box3"class="box">Box 3</div>
<p>Again, boxes 2 to 3 are positioned according to the normal flow, but box one has a position attribute with a left value of 100 pixels and a top value of 800 pixels. Because the position is absolute, it doesn't relate to any other elements on the page.</p>
<divid="box5"class="box">Box 1</div>
<divid="box2"class="box">Box 2</div>
<divid="box3"class="box">Box 3</div>
<p>Note that the posisitons are all expressed from the left and the top of the viewport. When box 1 is moved, the other boxes move to occupt the space that it created by taking itself out of the normal flow of elements.</p>
