Как наложить div (или любой элемент) на строку таблицы (tr)?
Я хотел бы наложить div (или любой элемент, который будет работать) на строку таблицы (тег tr), которая имеет более одного столбца.
Я пробовал несколько методов, которые не работают. Я разместил мой код ниже.
Я получаю наложение, но не непосредственно над строкой. Я попытался установить верхний слой на $divBottom.css ('top'), но это всегда "авто".
Итак, я на правильном пути, или есть лучший способ сделать это? Использующий 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 ответов
вам нужно, чтобы наложение 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 });
сделать:
div style="position:absolute"
td style="position:relative;display:block"
и вам не нужен jquery.
кроме того, убедитесь, что свойство overflow внешних элементов (в данном случае таблицы) не установлено в hidden. При скрытой настройке переполнения не будет отображаться наложение!
получение высоты и ширины объекта просто. Трудной частью для меня были верхние и левые координаты для абсолютного позиционирования.
Это единственный скрипт, который когда-либо работал надежно для меня:
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;
}