Element offset value will change in page render stage

<!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">
<head>
<title>offset will change in page render stage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<img id="image" src="http://www.google.com/logos/closing_ceremonies.gif"/>
<p>test <span id="span" style="color: blue; border: 2px solid orange; padding: 5px; background-color: yellow;">
offset will change</span> in page render stage
</p>
<script type="text/javascript" charset="utf-8">
var span = document.getElementById("span");
alert([span.offsetLeft, span.offsetTop]);
setTimeout(function(){
alert([span.offsetLeft, span.offsetTop]);
}, 1000);
</script>
</body>
</html>

比如上面的例子中，在span这个元素前还有一张图片是从服务器外部载入的，在页面渲染过程中，这个span对象会被先渲染到页面上，并有了对应的offset值，但当图片被载入页面之后，span元素又往下移了，此时offset值重新计算了，注意在opera测试中要每次清一下缓存才能看到效果。

[CSS Zen Garden] CSS absolute position and relative position explain

Absolute Positioning:
Understanding absolute positioning means understanding the concept of the document flow.
Absolute positioning provides the ability not only to move an element anywhere within the page, but also to remove it from the document flow. An absolutely positioned block no longer influences other elements within the document, and the linear flow continues as if that block doesn't exist.
Relative positioning:
Relative positioning, on the other hand, will not remove an element from the document flow. Based on the element's starting position, a relative position will offset it and then effectively leave a hole behind that other elements must negotiate, as if the element were still positioned there.
A relatively positioned element stays within the document flow; its originating position continues to affect other elements, whereas its new position is ignored by the document flow.
Relative positioning is mostly useful for offsetting elements; an element with a starting position inside a traditional grid may be easily moved outside the grid structure, and elements can be finely adjusted when other positioning options aren't possible. For example, Savarese employs relative positioning to move the dragon at the bottom of the design from a starting point below the white content area, to its final spot at the left of the footer area. Using absolute positioning to position elements near the bottom of a design is much more difficult than positioning them near the top, so this instance of relative positioning makes the adjustment easier.

#extraDiv1 {
background-image:url(Dragon.gif);
background-position:left top;
background-repeat:no-repeat;
height:206px;
left:-360px;
margin:0pt auto;
position:relative;
top:-225px;
width:96px;
}

reference:
http://www.csszengarden.com/?cssfile=070/070.css