Как наложить div (или любой элемент) на строку таблицы (tr)? - PullRequest
Новая
       3

Как наложить div (или любой элемент) на строку таблицы (tr)?

52 голосов
/ 17 июня 2010

Я бы хотел наложить div (или любой элемент, который будет работать) на строку таблицы (тег tr), в которой более одного столбца.

Я пробовал несколько методов, которые, похоже, не работают. Я разместил свой текущий код ниже.

Я получаю оверлей, но не прямо над строкой. Я попытался установить верхнюю часть наложения в $ 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>

Ответы [ 5 ]

34 голосов
/ 18 июня 2010

Вам нужно, чтобы оверлейный элемент 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
});
14 голосов
/ 03 февраля 2013

Сделайте: 

div style="position:absolute"

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

и вам не нужно jquery.

0 голосов
/ 02 мая 2014

Это должно сделать: 

var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;
0 голосов
/ 12 февраля 2014

Получение высоты и ширины объекта напрямую. Самой сложной частью для меня были координаты сверху и слева для абсолютного позиционирования.

Это единственный скрипт, который когда-либо работал для меня надежно: 

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 голосов
/ 09 сентября 2013

Кроме того, убедитесь, что свойство переполнения внешних элементов (в данном случае таблицы) не установлено как скрытое. При скрытой настройке переполнения наложение не будет отображаться!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...