title: React and getClientBoundingRect
body: <p>I have a piece of React html like to this:</p>
  
  <pre><code>&lt;div id="grandparent"&gt;
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas 
   congue ligula ac quam viverra nec consectetur 
   &lt;span class='container' style='position:relative'&gt;
     &lt;span class='hilited'&gt;ante hendrerit. &lt;/span&gt;
     &lt;div id='grandchild' style='position:absolute; top:...'&gt;
       Stuff...
     &lt;/div&gt;
   &lt;/span&gt; 
   Donec et mollis dolor....
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the 'grandchild' div to appear just below the 'hilited' span and just inside the left edge of the 'grandparent' div, so I plan to calculate grandchild's left position by taking the difference of getClientBoundingRect().left from the grandparent and container elements.</p>
  
  <p>Since this is all generated by React, I don't have the elements at creation time. I'm guessing that I need to collect refs to 'grandparent' and 'container', pass them down to 'grandchild' with state/props and calculate things there. Initial attempts have failed. </p>
  
  <p>What's the best way to take this on?</p>
  
  <p>Edit:</p>
  
  <p><a href="https://i.stack.imgur.com/QpGbX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QpGbX.jpg" alt="Diagram of desired layout"></a></p>
  
  <p>Note: The whole thing needs to nest. Sometimes 'grandchild' will contain text of its own which will have a highlighted section with its own grandchild nested below.</p>