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

Question

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.

I have tried a few methods, which don\'t s

Answer 1

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
});

Answer 2

Also, make sure the the outer elements (in this case the table) overflow property is not set to hidden. With the hidden setting on overflow, no overlay will be displayed!

Answer 3

Getting the height and width of an object straightforward. The hard part for me was the Top and Left coordinates for absolute positioning.

This is the only script that has ever worked reliably for me:

function posY(ctl)
{
    var pos = ctl.offsetHeight;
    while(ctl != null){
        pos += ctl.offsetTop;

        ctl = ctl.offsetParent; 
    }

    return pos;
}
function posX(ctl)
{
    var pos = 0;
    while(ctl != null){
        pos += ctl.offsetLeft;

        ctl = ctl.offsetParent; 
    }

    return pos;

}

Answer 4

Make:

div style="position:absolute"

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

and you don't need jquery.

Answer 5

This should do:

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

Answer 6

<!--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>