How do I set the z-index of a table row?

Maybe what I am trying to accomplish is not feasible but the general idea is that when a person clicks a table row, the page dims (like a modal) but l开发者_运维百科eaves that row visible for editing. I tried setting the z-index of the table row itself but it did not work. It will work if I set the table rows position attribute to absolute but that seems to remove the table row from the table completely.

I can only think of more complicated solutions like these:

1. You'll need 3 transparent gray divs instead of 1. Use the first to gray out the whole page. Set the z-index of the whole table to bring it above that div. Use the 2nd div to gray out everything above your row, and the third to gray out everything below your row, leaving just your row un-grayed.
2. Gray out the whole page. Create a duplicate table with a single row that you hover above the original table. When you edit this new table, sync those values with the underlying table.

I've successfully done this just now using

div.milk { position:absolute; z-index:2; width:100%; height:100%; opacity:.5; }
tr.raised { position:relative; z-index:3; }

so, in short, position:relative seems to work ?

I must admit, I came here because I still have some weird issues. but overall it seems to work ?

*-pike

If you're using jQuery, try this:

$("<get the tr>").css("z-index", <value>);

i don't think you'll be able to accomplish your desired effect with z-index. using overlay divs to mask everything around the table row seems like a more workable approach.