Javascript 如何将div（或任何元素）覆盖在表行（tr）上？

我希望将div（或任何可以工作的元素）覆盖在碰巧有多个列的表行（tr标记）上

我试过几种方法，但似乎不管用。我已经在下面发布了我的当前代码

我确实得到了一个覆盖层，但不是直接覆盖在这一行上。我尝试将覆盖顶部设置为$divBottom.css（'top'），但始终是“auto”

那么，我是走对了路，还是有更好的方法？正如您所看到的，使用jQuery是很好的

如果我在正确的轨道上，如何正确放置div？偏移量是包含元素、表中的偏移量吗？我需要做一些数学计算吗？我还会遇到其他的麻烦吗

$（文档）.ready（函数（）{
$（'#lnkDoIt'）。单击（函数（）{
变量$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）；
});
});
#行底{轮廓：红色实心2px}
#divBottom{margin:1em；字体大小：xx大；位置：相对；}
#divOverlay{背景色：银色；文本对齐：居中；位置：绝对；z索引：10000；不透明度：0.5；}

叠加测试

Lorem ipsum dolor sit amet，是一位杰出的献身者

这是底部文本
Lorem ipsum dolor sit amet，是一位杰出的献身者

这是覆盖分区。

您需要使覆盖div具有绝对位置。对行的顶部和左侧位置也使用position（）jQuery方法-以下是缺少的部分：

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

//
$divOverlay.css({
    position: 'absolute',
    top: bottomTop,
    left: bottomLeft,
    width: bottomWidth,
    height: bottomHeight
});
var rowPos=$divBottom.position（）；
bottomTop=rowPos.top；
bottomLeft=行位置左侧；
//
$divOverlay.css({
位置：'绝对'，
顶部：底部顶部，
左：左下角，
宽度：底部宽度，
高度：底部高度
});
制作：

而且您不需要jquery。
另外，请确保外部元素（在本例中为表）溢出属性未设置为隐藏。当隐藏设置为溢出时，将不显示覆盖
 直接获取对象的高度和宽度。对我来说，最难的部分是绝对定位的左上角坐标

这是唯一一个可靠地为我工作的脚本：

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;

}

这应该做到：

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


我在上面
他已经从样式表中选择了“位置：绝对”。不过，您使用“pos（）”是对的。这似乎起到了作用。。。有一个变化：var rowPos=$divBottom.pos（）；应为var rowPos=$divBottom.offset（）。offset（）是文档的左上方。jquery没有名为“pos”的函数。正确的语法应该是$divBottom.position（）；我知道这是一篇很老的帖子，而且这段代码非常有效！但是，我想知道如何使覆盖层与引导表一起工作（覆盖层如何使用divBottom调整宽度）？这是一个我一直与之合作的项目。谢谢你的帮助！如何从数百行中选择一个特定的表行？+1这是一个简单得多的解决方案，对我来说很有效。我使用了一个类：
td{position:relative；display:block；}.overlay{position:absolute；white space:nowrap；z-index:1000；}
然后将该类应用于第一个单元格：
textB的长块
PS-用于IE
var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;

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