如何在表格行（tr）上覆盖div（或任何元素）？
我想叠加一个div（或任何可以工作的元素）在一个只有一列的表格行（tr标签）上。
我已经尝试了一些方法，似乎没有工作。 我已经在下面发布了我的当前代码。
我确实得到一个覆盖，但不是直接在行上。 我试着将覆盖顶部设置为$ divBottom.css（'top'），但总是“自动”。
那么，我在正确的轨道上，还是有更好的方法呢？ 你可以看到，使用jQuery是很好的。
如果我在正确的轨道上，如何正确放置div？ 是偏移量在包含元素，表中的偏移量，我需要做一些math？ 任何其他陷阱我会遇到这个？
$(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>
你需要使覆盖div有一个绝对的位置。 还可以使用position（）jQuery方法来查看行的顶部和左侧位置 – 这里是缺less的部分：
var rowPos = $ divBottom.position（）;
bottomTop = rowPos.top;
bottomLeft = rowPos.left;
//
$ divOverlay.css（{
位置：“绝对”，
top：bottomTop，
左：bottomLeft，
宽度：bottomWidth，
高度：bottomHeight
}）;
使：
div style="position:absolute" td style="position:relative;display:block"
你不需要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;
