title: How to get and set element position in javascript
body: <p>all</p>
  
  <p>I'm confused about the position of an element. Let me start by how to get/set the left propety of an element.</p>
  
  <p>First, there is one way to set the element left position, use element.style.left. I copy the definition from <a href="http://www.w3schools.com/cssref/pr_pos_left.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_pos_left.asp</a> to below:</p>
  
  <ol>
  <li>For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of  its <strong>containing element</strong>.</li>
  <li>For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its <strong>normal position</strong>.</li>
  </ol>
  
  <p>so my questions are:</p>
  
  <ol>
  <li>In definition 1, is the containing element equal to the element.parentNode?  </li>
  <li>In definition 2, how can I get the element's normal position?</li>
  </ol>
  
  <p>Second, we can get the left position through element.offsetLeft. If I try this way, I should know which element is the element's offsetParent. I also copy the definition which I goole from internet below:</p>
  
  <ul>
  <li>The offsetParent property refers to the nearest positioned
  (non-static) ancestor element. If there is no such element,
  offsetParent will refer to the body element</li>
  </ul>
  
  <p>And I write a test Html file and try to get the offsetParent.</p>
  
  <pre><code>    &lt;div id="div_1"&gt;
          &lt;p id="p_1"&gt;
              Lorum ipsum...
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="div_2" style="position: relative;"&gt;
          &lt;p id="p_2"&gt;
              Lorum ipsum...
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;table id="table_1"&gt;
          &lt;th&gt;
          &lt;tr&gt;
              &lt;td id="td_1"&gt;Cell&lt;/td&gt;
              &lt;td&gt;Cell&lt;/td&gt;
          &lt;/tr&gt;&lt;/th&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>The offsetParent of element p_1 is body, and the offsetParent of element p_2 is div_2, so far, everything's good. But I try to get the  offsetParent of element td_1, the result is table_1, not body. Why? Accroding to the definition, I think it shoud be doby, because there is no nearest positioned (non-static) ancestor element. </p>
  
  <p>Hi, claustrofob, thanks for your replay, I think you have answered parts of my question, about why the td's offsetParent is table. But accroding to your another answer about style.left, I do not agree. I writed a new test file, below is the fragment:</p>
  
  <pre><code>    &lt;div id="div_2" style="border:2px solid red; width: 500; height: 300;position: relative;"&gt;
          &lt;div  id="div_3" style="border:2px solid blue;left:100px; width: 300; height: 100;"&gt;
              &lt;p id="p_2" style="position: relative;left: 30px"&gt;
                  Lorum ipsum...
              &lt;/p&gt;                
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          var p_2 = document.getElementById('p_2');
          document.write("&lt;div&gt;The position property of Element p_2 is "+ p_2.style.position +"&lt;/div&gt;")
          document.write("&lt;div&gt;The style.left of Element p_2 is "+ p_2.style.left +"&lt;/div&gt;")
          document.write("&lt;div&gt;The offsetParent of Element p_2 is "+ p_2.offsetParent.id +"&lt;/div&gt;")
          document.write("&lt;div&gt;The offsetLeft of Element p_2 is "+ p_2.offsetLeft +"&lt;/div&gt;")
          document.write("&lt;br/&gt;")
          var div_3 = document.getElementById('div_3');
          document.write("&lt;div&gt;The position property of Element div_3 is "+ (div_3.style.position ? div_3.style.position : 'not defined') +"&lt;/div&gt;")
          document.write("&lt;div&gt;The style.left of Element div_3 is "+ div_3.style.left +"&lt;/div&gt;")
          document.write("&lt;div&gt;The offsetParent of Element div_3 is "+ div_3.offsetParent.id +"&lt;/div&gt;")
          document.write("&lt;div&gt;The offsetLeft of Element div_3 is "+ div_3.offsetLeft +"&lt;/div&gt;")          
      &lt;/script&gt;
  </code></pre>
  
  <p>The outPut is:</p>
  
  <p>The position property of Element p_2 is relative</p>
  
  <p>The style.left of Element p_2 is 30px</p>
  
  <p>The offsetParent of Element p_2 is div_2</p>
  
  <p>The offsetLeft of Element p_2 is 30</p>
  
  <p>The position property of Element div_3 is not defined</p>
  
  <p>The style.left of Element div_3 is 100px</p>
  
  <p>The offsetParent of Element div_3 is div_2</p>
  
  <p>The offsetLeft of Element div_3 is 0</p>
  
  <p>If you focus on the output about element div_3, you can find obviously the style.left does no equal to the distance from element to element.offsetParent.</p>