title: element.getBoundingClientRect() not getting correct position of element
body: <p>I'm trying to draw a line between the clicked element and '#identifier' using element.getBoundingClientRect(). element.getBoundingClientRect() is not getting the actual coordinates of element due to some other elements on the page which are positioned relative. When I tried to comment out the '#header' and '#greytext' elements, the line is displaying as expected. Will the other elements on the page effect the getBoundingClientRect() coordinates?<br/><br/>
  Here is my code:<br/>
  Misaligned lines: <a href="https://jsfiddle.net/SampathPerOxide/jdyoz3r4/34/" rel="nofollow noreferrer">https://jsfiddle.net/SampathPerOxide/jdyoz3r4/34/</a><br/>
  Aligned lines after commenting out the '#header' and '#greytext': <a href="https://jsfiddle.net/SampathPerOxide/kqfjvs04/7/" rel="nofollow noreferrer">https://jsfiddle.net/SampathPerOxide/kqfjvs04/7/</a><br/><br/>
  Can someone clarify why the '#header' and '#greytext' elements are disturbing the '#identifier' coordinates?</p>
  <pre><code>&lt;style&gt;
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&amp;display=swap');
  
  html,
  body {
    font-family: 'Ubuntu', sans-serif;
    background-color: lightblue;
    color: #000;
  }
  
  #content {
    color: #787878;
  }
  
  .container-fluid-child {
    background-color: #fff;
    position: relative;
    padding: 5%;
  }
  
  .container-fluid-innerchild {
    background-color: #fff;
    position: relative;
    border-radius: 25px;
  }
  
  .text-white {
    color: #fff;
  }
  
  .car-image {
    width: 35%;
    max-width: 35%;
    border: 1px solid #000;
  }
  
  .step-one {
    width: 130px;
    height: 130px;
    background-color: #81a1b6;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 50%;
  }
  
  .sound-icon {
    width: 20px;
    float: left;
    margin-right: 10px;
  }
  
  .set-sound {
    position: absolute;
    top: 2.4em;
    width: 100%;
  }
  
  .intro-para {
    position: absolute;
    width: 35%;
    font-size: 1.2em;
  }
  
  .hyperlink {
    color: #fff;
    text-decoration: none;
    font-size: 1.3em;
  }
  
  .hyperlink:hover {
    color: #fff;
    font-weight: 900;
    text-decoration: none;
  }
  
  .hyperlink:focus {
    color: #fff;
    text-decoration: none;
  }
  
  .footer {
    padding: 1em;
  }
  
  .text-over-image {
    float: left;
    position: absolute;
    bottom: 23em;
    left: 5em;
  }
  
  .relative {
    position: relative;
  }
  
  .textonimage {
    position: absolute;
    max-width: 30%;
    top: 2%;
    font-weight: 600;
  }
  
  .ableft {
    left: 1em;
  }
  
  .abright {
    right: 1em;
  }
  
  .car {
    cursor: pointer;
  }
  
  .grey {
    color: grey;
    font-weight: 600;
    margin-left: 1.5em;
    max-width: 50%;
    position: relative;
    top: 1em;
  }
  
  .no-padding {
    padding: 0px;
  }
  
  .firstcar-detail {
    border-radius: 25px;
  }
  
  #hr {
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(-45deg);
    top: 12%;
    left: 18%;
    height: 20%;
    background-color: #000;
    width: 1px;
    position: absolute;
  
  }
  
  #hrtext {
    position: absolute;
    bottom: 85%;
    left: 5%;
  }
  
  .series-ul li {
    list-style: none;
    color: grey;
    font-size: 1em;
    font-weight: 600;
    border: 2px solid grey;
    display: table;
    padding: 0.3em 0.1em;
    text-align: center;
    margin: 0.5em;
    cursor: pointer;
  }
  
  .series-div {
    position: absolute;
    left: 65%;
    top: 0em;
  }
  
  .identifier {
    width: 10px;
    height: 10px;
    background-color: red;
    position: absolute;
    right: 45%;
    top: 30%;
  }
  
  #line {
    position: absolute;
    width: 2px;
    margin-top: -1px;
    background-color: red;
  }
  
  .fullwidth-img {
    width: 100%;
  }
  
  .width70-img {
    width: 90%;
    margin: 0px auto;
    margin-top: 10%;
  }
  
  .margintop10 {
    margin-top: 10%;
  }
  
  .hide {
    display: none;
  }
  
  .pointer {
    cursor: pointer;
  }
  
  .bottom-text {
    position: absolute;
    bottom: 5%;
    left: 5%;
    max-width: 15%;
  }
  
  @media only screen and (max-width: 1024px) {
    .series-ul li {
      font-size: 1em;
      min-width: auto;
    }
  
    .grey {
      max-width: 100%;
      font-size: 1.5em;
      top: auto;
    }
  
    .header .text-right {
      text-align: center;
      font-size: 2em;
    }
  
    .set-sound {
      top: 4em;
    }
  
    .bottom-text {
      bottom: 0%;
      max-width: 100%;
    }
  
    .intro-para {
      position: relative;
      width: 100%;
      text-align: center;
    }
  
    .textonimage {
      bottom: 100%;
      top: auto;
    }
  }
  
  &lt;/style&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          
          &lt;div id=&quot;header&quot;&gt;&lt;div class=&quot;row  header&quot;&gt;
          &lt;div class=&quot;col-md-12 col-sm-12 col-xs-12&quot;&gt;
              &lt;div class=&quot;col-md-8 col-sm-8 col-xs-8&quot;&gt; &lt;h1 class=&quot;text-right&quot;&gt;Some dummy placeholder - Random text &lt;/h1&gt;&lt;/div&gt;
              &lt;div class=&quot;col-md-4 col-sm-4 col-xs-4&quot;&gt;
                  &lt;div class=&quot;set-sound&quot;&gt;
                      &lt;img src=&quot;images/icons8-sound-50.png&quot; class=&quot;img-responsive sound-icon hide&quot;&gt;
      
              &lt;p&gt;Some dummy placeholder&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
          &lt;div id=&quot;content&quot;&gt;&lt;div class=&quot;container-fluid-innerchild&quot;&gt;
             &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-12 col-sm-12 col-xs-12&quot;&gt;
          &lt;div class=&quot;col-md-7 col-sm-7 col-xs-7 no-padding&quot;&gt;
              &lt;div id=&quot;greytext&quot;&gt;
                  &lt;h2 class=&quot;grey&quot;&gt;Some dummy placeholder - Random text&lt;/h2&gt;
              &lt;/div&gt;
              &lt;br&gt;
           &lt;div class=&quot;relative&quot;&gt;
          &lt;div &gt;
              &lt;div id=&quot;hrtext&quot;&gt;&lt;p&gt;Some dummy placeholder
          &lt;/p&gt;&lt;/div&gt;
          
          &lt;div id=&quot;hr&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
                  &lt;div class=&quot;identifier&quot; id=&quot;identifier&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;series-div&quot;&gt;
                      &lt;ul class=&quot;series-ul&quot;&gt;
                        &lt;li class=&quot;seriesli&quot;&gt;A 1&lt;/li&gt;
                  
                        &lt;li class=&quot;seriesli&quot;&gt;B 1&lt;/li&gt;
                    
                        &lt;li class=&quot;seriesli&quot;&gt;C 1&lt;/li&gt;
                      
                      &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;div id=&quot;line&quot;&gt;&lt;/div&gt;
                         &lt;img src=&quot;https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg&quot; class=&quot;img-responsive firstcar-detail fullwidth-img&quot;&gt;
                 
          &lt;/div&gt;
         
                     &lt;/div&gt;
          
          &lt;div class=&quot;col-md-5 col-xs-5 col-sm-5&quot;&gt;
              
      &lt;div&gt;
          &lt;img src=&quot;https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg&quot; class=&quot;img-responsive width70-img firstgraph pointer&quot;&gt;
          &lt;img src=&quot;https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg&quot; class=&quot;img-responsive width70-img zoomedgraph&quot;&gt;
      &lt;/div&gt;
                
          &lt;/div&gt;
          
             &lt;/div&gt;
             
          &lt;/div&gt;
          &lt;/div&gt;&lt;/div&gt;
          &lt;div id=&quot;footer&quot;&gt;&lt;div class=&quot;row text-white footer&quot;&gt;
          &lt;div class=&quot;col-md-12 col-sm-12 col-xs-12&quot;&gt;
              &lt;div class=&quot;col-md-2 col-sm-2 col-xs-2&quot;&gt;&lt;a href=&quot;javascript:void(0);&quot; class=&quot;hyperlink&quot;&gt;Home&lt;/a&gt;            &lt;/div&gt;
              &lt;div class=&quot;col-md-10 col-sm-10 col-xs-10 text-right&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;hyperlink&quot;&gt;google.com&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
          
      &lt;/div&gt;
  &lt;script&gt;
  $('.seriesli').click(function() {
  
    function adjustLine(from, to, line) {
  
      // Get actual position relative to viewport.
      // See https://stackoverflow.com/a/11396681/117030
      fromBCR = from.getBoundingClientRect();
      toBCR   = to.getBoundingClientRect();
      
      var fT = fromBCR.top + from.offsetHeight / 2;
      var tT = toBCR.top + to.offsetHeight / 2;
      
      // Don't add offsetWidth. This connects to the middle, not the left edge.
      var fL = fromBCR.left //+ from.offsetWidth / 2;
      var tL = toBCR.left + to.offsetWidth / 2;
  
      var CA = Math.abs(tT - fT);
      var CO = Math.abs(tL - fL);
      var H = Math.sqrt(CA * CA + CO * CO);
      var ANG = 180 / Math.PI * Math.acos(CA / H);
  
      if (tT &gt; fT) {
        var top = (tT - fT) / 2 + fT;
      } else {
        var top = (fT - tT) / 2 + tT;
      }
      if (tL &gt; fL) {
        var left = (tL - fL) / 2 + fL;
      } else {
        var left = (fL - tL) / 2 + tL;
      }
  
      if ((fT &lt; tT &amp;&amp; fL &lt; tL) || (tT &lt; fT &amp;&amp; tL &lt; fL) || (fT &gt; tT &amp;&amp; fL &gt; tL) || (tT &gt; fT &amp;&amp; tL &gt; fL)) {
        ANG *= -1;
      }
      top -= H / 2;
  
      line.style[&quot;-webkit-transform&quot;] = 'rotate(' + ANG + 'deg)';
      line.style[&quot;-moz-transform&quot;] = 'rotate(' + ANG + 'deg)';
      line.style[&quot;-ms-transform&quot;] = 'rotate(' + ANG + 'deg)';
      line.style[&quot;-o-transform&quot;] = 'rotate(' + ANG + 'deg)';
      line.style[&quot;-transform&quot;] = 'rotate(' + ANG + 'deg)';
      line.style.top = top + 'px';
      line.style.left = left + 'px';
      line.style.height = H + 'px';
    }
    adjustLine(
      this, // Element that was clicked.
      document.getElementById('identifier'),
      document.getElementById('line')
    );
  });
  
  &lt;/script&gt;
  </code></pre>