¿Cómo superponer un div (o cualquier elemento) sobre una fila de tabla (tr)?

Me gustaría superponer un div (o cualquier elemento que funcione) sobre una fila de la tabla (etiqueta tr) que tenga más de una columna.

He intentado algunos métodos, que no parecen funcionar. He publicado mi código actual a continuación.

Obtengo una superposición, pero no directamente sobre la fila. Intenté configurar la superposición superior en $ divBottom.css (‘top’), pero eso siempre es ‘automático’.

Entonces, ¿estoy en el camino correcto o hay una mejor manera de hacerlo? Utilizar jQuery está bien, como puedes ver.

Si estoy en el camino correcto, ¿cómo obtengo el div colocado correctamente? ¿Offset es una compensación en el elemento contenedor, la tabla, y necesito hacer algunas operaciones matemáticas? ¿Alguna otra trampa con la que me encuentre?

$(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; } 
    Overlay Tests   

Do it!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the bottom text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the overlay div.

Necesitas hacer que la superposición div tenga una posición absoluta. También use el método jQuery de posición () para las posiciones superior e izquierda de la fila: aquí están las piezas faltantes:

 var rowPos = $ divBottom.position ();
 bottomTop = rowPos.top;
 bottomLeft = rowPos.left;

 //
 $ divOverlay.css ({
     posición: 'absoluta',
     arriba: bottomTop,
     izquierda: bottomLeft,
     ancho: inferior Ancho,
     altura: alturaAltura
 });

Hacer:

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

y no necesitas jquery.

Además, asegúrese de que la propiedad de desbordamiento de los elementos externos (en este caso, la tabla) no esté configurada como oculta. Con la configuración oculta en overflow, ¡no se mostrará superposición!

Obtener la altura y el ancho de un objeto directo. Lo difícil para mí fueron las coordenadas superior e izquierda para el posicionamiento absoluto.

Este es el único script que alguna vez me ha funcionado confiablemente:

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

Esto debería hacer:

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