How to overlay a div (or any element) over a table row (tr)?

Make:

div style="position:absolute"

td style="position:relative;display:block"

and you don't need jquery.

You need to make the overlay div have an absolute position. Also use the position() jQuery method for top and left positions of the row - here are the missing pieces:

var rowPos = $divBottom.position();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;

//
$divOverlay.css({
    position: 'absolute',
    top: bottomTop,
    left: bottomLeft,
    width: bottomWidth,
    height: bottomHeight
});

<!--only this the structure you need to make it visible-->


<!-- this is a wrapper -->
<div style="position: relative;"> 
   
    <div style="position: absolute;"> i'm on the top</div> <!-- here the things you want on top -->

 <!-- everything code you want to write -->
    <table></table>
</div>