Elements Position Within Page

Element Left = 0px Element Top = 0px

Div 1, 2 and, 3 are in the natural flow of the document.

Div 1

Div 2

Div 4 and 5 are relatively positioned inside Div 3, the positions shown are those stated in the inline attributes

Div 3

Div 4 positioned relative within div 3
left:30px ; top:50px

Div 5 positioned relative within div 4
left:50px ; top:100px

Passing object

<script type="text/javascript">
<!--

function getElPos(obj){

elPosX = obj.offsetLeft
elPosY = obj.offsetTop
parentEl = obj.offsetParent

while (parentEl != null){
elPosX += parentEl.offsetLeft // add left offset of parent
elPosY += parentEl.offsetTop // add top offset of parent
parentEl = parentEl.offsetParent // move up the elements until no more offset parents exist
}

return "Left pos = "+elPosX+"px\n\nTop pos = "+elPosY+"px" // return totals


}

//-->
</script>

Passing ID

<script type="text/javascript">
<!--

function getElPos(id){
el=document.getElementById(id)

elPosX = el.offsetLeft
elPosY = el.offsetTop
parentEl = el.offsetParent

while (parentEl != null){
elPosX += parentEl.offsetLeft
elPosY += parentEl.offsetTop
parentEl = parentEl.offsetParent
}

return "Left pos = "+elPosX+"px\n\nTop pos = "+elPosY+"px" // return totals

}

//-->
</script>