html tr标签添加div,如何在表行（tr）上叠加div（或任何元素）？

我想在一个碰巧有多个列的表行(tr标签)上叠加一个div(或任何可以工作的元素)。

我尝试了一些似乎不起作用的方法。我在下面发布了我当前的代码。

我确实得到了一个叠加层，但不是直接在行上。我尝试将叠加层顶部设置为$ divBottom.css('top')，但这始终是'auto'。

那么，我是在正确的轨道上，还是有更好的方法呢？你可以看到，使用jQuery很好。

如果我在正确的轨道上，我如何正确放置div？ offsetTop是否包含在包含元素，表中的偏移量，我需要做一些数学运算？还有其他问题我会遇到这个问题吗？

$(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);

});

});

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

Overlay Tests

Do it!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the bottom text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the overlay div.