How to overlay a div (or any element) over a table row (tr)?

Question

I'd like to overlay a div (or any element that'll work) over a table row (tr tag) that happens to have more than one column.

I have tried a few methods, which don't seem to work. I've posted my current code below.

I do get an overlay, but not directly over just the row. I tried setting the overlay top to $divBottom.css('top'), but that is always 'auto'.

So, am I on the right track, or is there a better way of doing it? Utilizing jQuery is fine as you can see.

If I am on the right track, how do I get the div placed correctly? Is the offsetTop an offset in the containing element, the table, and I need to do some math? Any other gotchas I'll run into with that?

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

score 36 · Accepted Answer · edited Jul 27 '11 at 09:48

36

You need to make the overlay div have an absolute position. Also use the position() jQuery method for top and left positions of the row - here are the missing pieces:

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

//
$divOverlay.css({
    position: 'absolute',
    top: bottomTop,
    left: bottomLeft,
    width: bottomWidth,
    height: bottomHeight
});

edited Jul 27 '11 at 09:48

Brian Scott

9,221
6
47
68

answered Jun 17 '10 at 20:09

jhorback

833
8
12

His overly already picked up "position: absolute" from his stylesheet. However you're right about using "pos()". – Pointy Jun 17 '10 at 20:10
1

That appears to do the trick... with one change: var rowPos = $divBottom.pos(); should be var rowPos = $divBottom.offset(); .offset() is the top/left in the doc. – slolife Jun 17 '10 at 20:40
6

jquery does not have a function named 'pos'. The correct syntax would be $divBottom.position(); – Brian Scott Jul 27 '11 at 09:48
I know this is a pretty old post, and this code works great! However, I was wondering how I could make the overlay work with bootstrap tables (how can the overlay resize width with the divBottom)? Here is a [link to a bootply](http://www.bootply.com/I2VLZ9xT5G) I've been working with. Thanks for the help! – Nathan Bills Nov 03 '16 at 15:38

score 15 · Answer 2 · answered Feb 02 '13 at 21:27

15

Make:

div style="position:absolute"

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

and you don't need jquery.

answered Feb 02 '13 at 21:27

How can I select one specific table row out of hundreds? – koppor Mar 25 '13 at 14:37
1

+1 This is a much simpler solution and it worked for me. I used a class: `td { position: relative; display: block;} .overlay {position: absolute; white-space: nowrap; z-index: 1000;}` and then applied the class to the first cell: `long block of textB` – Yogi Apr 28 '14 at 18:22
PS - For IE<8 the position relative must also be applied to the TR. – Yogi Apr 28 '14 at 18:54

score 3 · Answer 3 · answered Nov 05 '20 at 05:52

<!--only this the structure you need to make it visible-->


<!-- this is a wrapper -->
<div style="position: relative;"> 
   
    <div style="position: absolute;"> i'm on the top</div> <!-- here the things you want on top -->

 <!-- everything code you want to write -->
    <table></table>
</div>

score 0 · Answer 4 · answered Sep 09 '13 at 15:04

0

Also, make sure the the outer elements (in this case the table) overflow property is not set to hidden. With the hidden setting on overflow, no overlay will be displayed!

answered Sep 09 '13 at 15:04

Fazi

3,909
4
27
23

score 0 · Answer 5 · answered Feb 12 '14 at 18:41

Getting the height and width of an object straightforward. The hard part for me was the Top and Left coordinates for absolute positioning.

This is the only script that has ever worked reliably for me:

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;

}

score 0 · Answer 6 · edited May 02 '14 at 11:12

0

This should do:

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

edited May 02 '14 at 11:12

Tushar Gupta - curioustushar

58,085
24
103
107

answered May 02 '14 at 10:55

Leoj Etagram

1

How to overlay a div (or any element) over a table row (tr)?

6 Answers6

Linked