web-dev-qa-db-ja.com

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>
javascriptjqueryhtmlcssoverlay
52
slolife

オーバーレイ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 
}）;
34
jhorback

作る：

div style="position:absolute"

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

jqueryは必要ありません。

14
user1647224

また、外側の要素（この場合はテーブル）のオーバーフロープロパティが非表示に設定されていないことを確認してください。オーバーフローの非表示設定では、オーバーレイは表示されません！

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

}
0
mike

これはする必要があります：

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