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

Question

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 leaves 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.

Answer 1

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.