Html/CSS Z:index Position:Relative 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.

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.

If the elements have the same z-index then the browser will display them in the order they appear in the html. So you don't have to set z-index at all. You can do something like this DEMO. (Hover over the top left cell, or the 3rd from top in the second column.) So long as the divs you want to display are below the table in which you wish to highlight.

Is it important to use only html and css in your project ? If not you could handle the hover functionality over to Javascript.