CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 2542

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.

Upvotes: 0

Views: 512

Answers (3)

Krimo
Krimo

Reputation: 954

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

Upvotes: 0

anothershrubery
anothershrubery

Reputation: 21003

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.

Upvotes: 0

DanielB
DanielB

Reputation: 20240

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.

Upvotes: 2

Related Questions