Jquery 将元素放置在另一个元素的顶部

我有一个有两列的表。当用户单击第2列的任何单元格时，应在“该单元格”上覆盖一个div，该单元格应与单击的单元格左上对齐，并具有绝对定位

我们怎么做呢。这是我到目前为止所做的（不是工作代码）

---

小提琴：这将是我的方法。请注意，类最初是如何具有我们所需的位置和左偏移的，而且，我们只是根据需要将其附加到元素中

$('td').on('click', function(){
    var $this = $(this),
    $divOverlay = $('#divOverlay');

    $divOverlay.css({
        height:$this.height(),
        width:$this.outerWidth()
    }).appendTo($this).show();

});

注意-

如果在单元格上使用填充而不是硬宽度值，则只需使用

outerWidth（）

，以防使用某种类型的响应设计

        var $divOverlay = $('#divOverlay');
        var bottomWidth = $('tr').css('width');   //Get the width of the tr
        var bottomHeight = $('tr').css('height'); //Get the height of the tr 
        var rowPos = $(this).position();
        bottomTop = rowPos.top;
        bottomLeft = rowPos.left;
        $divOverlay.css({
            position: 'absolute',
            top: bottomTop,            
            width: bottomWidth,  //assign here
            height: bottomHeight //assign here
        });
        ....
        ....

---

我认为在这种情况下，您应该使用

.offset

而不是

.position

，因为元素不共享同一个父元素。

---

同时添加：

left:bottomLeft

为什么不更改单元格的背景色？只需将

left:bottomLeft

添加到属性中即可。覆盖显示在第1列。我的任务是使覆盖显示在第2列单元格中。覆盖显示在第1列。我的任务是使覆盖显示在第2列单元格中

        var $divOverlay = $('#divOverlay');
        var bottomWidth = $('tr').css('width');   //Get the width of the tr
        var bottomHeight = $('tr').css('height'); //Get the height of the tr 
        var rowPos = $(this).position();
        bottomTop = rowPos.top;
        bottomLeft = rowPos.left;
        $divOverlay.css({
            position: 'absolute',
            top: bottomTop,            
            width: bottomWidth,  //assign here
            height: bottomHeight //assign here
        });
        ....
        ....