Why does the position method not return the expected values?
<p>Why does the <code>position</code> method not return <code>[left: 100, top: 10]</code> in this case:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#parent1 {
    width: 300px;
    height: 200px;
    border: solid 9px pink;
}

#child1 {
    position: relative;
    left: 100px;
    top: 10px;
    width: 100px;
    height: 100px;
    border: solid 5px green;
}
&lt;/style&gt;
&lt;script src="http://jquery-local/jquery.all.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
(function ($) {
    $(document).ready(function () {
        console.log($('#child1').position());
    });
})(jQuery); 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="parent1"&gt;
    &lt;div id="child1"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Is the only way to get the position via the <code>css</code> method? </p>
