Question

I have a table with many rows.

I want to have an on hover effect on the rows. When someone hovers over a row a popup div displays with some additonal information about that row.

I was planning on doing this with a div and on hover making the div visible/invisible.

Now my problem is with the html/css.

How do I make the table with a div that appears on hover but does not affect the look of the table.

I was thinking z index, with position relative. But I cannot get it working.

Answer 1

You should use position:abolute; top: 10px; left: 20px; z-index: 1 for the div and position: relative for the tr. (top and left are only assumptions. use these for positioning the div relative to your row)

Relative positioning the row, holds it in the context. Absolute positioning the div makes its position absolute to its parent (here the row). If the row doesn’t have relative the div would be positioned absolute to the body or an parent element which has set a position.