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

我想叠加一个div（或者任何可以工作的元素）在一个只有一列的表格行（tr标签）上。如何在表格行（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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    <title>Overlay Tests</title> 
 
    </head> 
 
    <body> 
 
    <p align="center"><a id="lnkDoIt" href="#">Do it!</a></p> 
 
    <table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative"> 
 
     <tr> 
 
     <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td> 
 
     </tr> 
 
     <tr id="rowBottom"> 
 
     <td><div id="divBottom"><p align="center">This is the bottom text</p></div></td> 
 
     </tr> 
 
     <tr> 
 
     <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td> 
 
     </tr> 
 
    </table> 
 
    <div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div> 
 
    </body> 
 
</html>

来源

2010-06-17 slolife

你需要使覆盖DIV有一个绝对位置。还可以使用位置（）jQuery的方法行的顶部和左侧位置 - 这里是缺失的部分：

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

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

来源

2010-06-17 20:09:03 jhorback

他过于已拿起“绝对位置”。然而，你正确地使用“pos（）”。 – Pointy 2010-06-17 20:10:16

这似乎是做伎俩......有一个变化： var rowPos = $ divBottom.pos（）; 应该是 var rowPos = $ divBottom.offset（）; .offset（）是文档中的顶部/左侧。 – slolife 2010-06-17 20:40:26

jquery没有名为'pos'的函数。正确的语法是$ divBottom.position（）; – 2011-07-27 09:48:03

品牌：

div style="position:absolute" 

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

，你并不需要jQuery的。

来源

2013-02-02 21:27:23

如何从数百个中选择一个特定的表格行？ – koppor 2013-03-25 14:37:19

+1这是一个更简单的解决方案，它为我工作。我用了一个类：'td {position：relative;显示：块;}。叠加{位置：绝对;白色空间：nowrap;然后将这个类应用到第一个单元格上：' long block of textB' – Roberto 2014-04-28 18:22:26

PS - 对于IE <8，位置相对必须应用于TR。 – Roberto 2014-04-28 18:54:41

此外，请确保外部元素（在这种情况下表）溢出属性未设置为隐藏。在隐藏设置溢出时，不会显示覆盖图！

来源

2013-09-09 15:04:53 Fazi

直接获取对象的高度和宽度。对我来说最难的部分是绝对定位的顶部和左侧坐标。

这是唯一一个曾经工作可靠我的脚本：

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; 

}

来源

2014-02-12 18:41:58 mike

这应该做的：从他的样式表：

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

来源

2014-05-02 10:55:26

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

回答

相关问题