title: How to overlay a div (or any element) over a table row (tr)?
body: <p>I'd like to overlay a div (or any element that'll work) over a table row (tr tag) that happens to have more than one column.</p>
  
  <p>I have tried a few methods, which don't seem to work.  I've posted my current code below.</p>
  
  <p>I do get an overlay, but not directly over just the row.  I tried setting the overlay top to $divBottom.css('top'), but that is always 'auto'.</p>
  
  <p>So, am I on the right track, or is there a better way of doing it? Utilizing jQuery is fine as you can see.</p>
  
  <p>If I am on the right track, how do I get the div placed correctly?  Is the offsetTop an offset in the containing element, the table, and I need to do some math?  Any other gotchas I'll run into with that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#lnkDoIt').click(function() {
      var $divBottom = $('#rowBottom');
      var $divOverlay = $('#divOverlay');
      var bottomTop = $divBottom.attr('offsetTop');
      var bottomLeft = $divBottom.attr('offsetLeft');
      var bottomWidth = $divBottom.css('width');
      var bottomHeight = $divBottom.css('height');
      $divOverlay.css('top', bottomTop);
      $divOverlay.css('left', bottomLeft);
      $divOverlay.css('width', bottomWidth);
      $divOverlay.css('height', bottomHeight);
  
      $('#info').text('Top: ' + bottomTop + ' Left: ' + bottomLeft);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#rowBottom { outline:red solid 2px }
  #divBottom { margin:1em; font-size:xx-large; position:relative; }
  #divOverlay { background-color:Silver; text-align:center;  position:absolute; z-index:10000; opacity:0.5; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Overlay Tests&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p align="center"&gt;&lt;a id="lnkDoIt" href="#"&gt;Do it!&lt;/a&gt;&lt;/p&gt;
      &lt;table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative"&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="rowBottom"&gt;
          &lt;td&gt;&lt;div id="divBottom"&gt;&lt;p align="center"&gt;This is the bottom text&lt;/p&gt;&lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div id="divOverlay" style=""&gt;&lt;p&gt;This is the overlay div.&lt;/p&gt;&lt;p id="info"&gt;&lt;/p&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>