The dojo.position function is used to obtain position and size information about a DOM node. The type of information it returns is the width and height of the DOM node’s border-box (or borderStart-to-borderEnd size), and absolute position (border-start) in the form of x and y coordinates. If the optional includeScroll boolean parameter (default=false) has the value true, then the returned x and y values are offsets from the document root (unaffected by window scrolling), otherwise they are relative to the current viewport. The return object looks like:

{ w: 300: h: 150, x: 700, y: 900, }

for a node with a width of 300px and a height of 150px, with page absolute coordinates of 700px on the x-axis and 900px on the y-axis.

Since Dojo 1.7, dojo.position is exposed via the position method of the dojo/dom-geometry module. An alias is kept in dojo/_base/html for backward-compatibility.

This example shows how to center a small DOM node (with background image) over a larger DOM node (the frame) both vertically and horizontally relative to the document root.

varlastX=0,lastY=0;functiondoit(){vardivInfo=dojo.position('div1',true),// use true to get the x/y relative to the document rootspan=dojo.byId('span1'),spanInfo=dojo.position(span,true);lastX+=divInfo.x-spanInfo.x+(divInfo.w-spanInfo.w)/2;lastY+=divInfo.y-spanInfo.y+(divInfo.h-spanInfo.h)/2;dojo.style(span,{left:lastX+"px",top:lastY+"px"});}

<spanid="span1"class="centered"style=""></span><divid="div1"class="container"style=""></div><buttontype="button"onclick="doit()"class="">Click to center the image over the frame</button>