title: Is getBoundingClientRect().left returning a wrong value?
body: <p>I want to position a div ".indicator" just where a li element starts, so
  for example, if I want to position the div in relation to the
  second li, I do: </p>
  
  <pre><code>indicator.style.left = li[1].getBoundingClientRect().left+"px";
  </code></pre>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var li = document.querySelectorAll(".ulcontainer &gt; li");
  
  var indicator = document.querySelector(".indicator");
  
  indicator.style.left = li[1].getBoundingClientRect().left+"px";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  .ulcontainer {
      white-space: nowrap;
      padding: 0;
      position: relative;
  }
  .ulcontainer li {
      list-style: none;
      display: inline-block;
      border: 1px solid;
      padding: 0 20px;
  }
  
  .indicator {
      background-color: red;
      display: inline-block;
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="ulcontainer"&gt;
      &lt;li&gt;OPTION 1&lt;/li&gt;&lt;li&gt;OPTION 2&lt;/li&gt;&lt;li&gt;OPTION 3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="indicator"&gt;indicator&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that the div getBoundingClientRect().left is not returning
  the correct value for the li elements.
  If you run the example, you will see that ".indicator" is not starting
  in the beggining of the current li.</p>
  
  <p>Why is not getBoundingClientRect().left returning the current value?</p>