<p>Can someone show me how to get the <code>top</code> &amp; <code>left</code> position of a <code>div</code> or <code>span</code> element when one is not specified?</p>
<p>ie:</p>
<pre><code>&lt;span id='11a' style='top:55px;' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt;
&lt;span id='12a' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt;
</code></pre>
<p>In the above, if I do:</p>
<pre><code>document.getElementById('11a').style.top
</code></pre>
<p>The value of <code>55px</code> is returned. However, if I try that for <code>span</code> '12a', then nothing gets returned.</p>
<p>I have a bunch of <code>div</code>/<code>span</code>s on a page that I cannot specify the <code>top</code>/<code>left</code> properties for, but I need to display a <code>div</code> directly under that element.</p>

This function will tell you the x,y position of the element relative to the page. Basically you have to loop up through all the element's parents and add their offsets together.
```
```
function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}
```
```
However, if you just wanted the x,y position of the element relative to its container, then all you need is:
```
```
var x = el.offsetLeft, y = el.offsetTop;
```
```
To put an element directly below this one, you'll also need to know its height. This is stored in the offsetHeight/offsetWidth property.
```
```
var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;
```
```