如何在表行(tr)上叠加div(或任何元素)？

Question

如何在表行(tr)上叠加div(或任何元素)？

slo*_*ife 52 html javascript css jquery overlay

我想在一个碰巧有多个列的表行(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);
  });
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

jho*_*ack 34

您需要使叠加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
});

jquery没有名为'pos'的函数.正确的语法是$ divBottom.position(); (6认同)
这似乎可以解决问题......只需一个更改： var rowPos = $divBottom.pos(); 应该是 var rowPos = $divBottom.offset(); .offset() 是文档中的顶部/左侧。 (2认同)

Answer 2

小智 14

使:

div style="position:absolute"

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

Run Code Online (Sandbox Code Playgroud)

而且你不需要jquery.

归档时间：	15 年，2 月前
查看次数：	70407 次
最近记录：	9 年，1 月前