如何设置表行的z索引?

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.

也许我想要完成的事情是不可行的，但总的想法是，当一个人单击一个表行时，页面会变暗(像一个模态)，但会使该行可见以便编辑。我尝试设置表行本身的z索引，但它不起作用。如果我将表行位置属性设置为绝对，那么它将会起作用，但这似乎完全将表行从表中删除。

4 个解决方案

#1

I can only think of more complicated solutions like these:

我只能想到更复杂的解决方案:

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.
你需要3个透明的灰色divs而不是1。使用第一个到灰色的整个页面。设置整个表的z-索引，将其置于该div之上。使用第2个div将您的行上方的所有内容都清除掉，第三个div将所有的内容都删除，只留下您的行未变格。
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.
把整页都弄灰。创建一个重复的表，并在原始表上方悬停一行。编辑这个新表时，将这些值与底层表同步。

#2

If you're using jQuery, try this:

如果您正在使用jQuery，请尝试以下方法:

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

#3

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

*派克

#4

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.

我认为你用z指数无法达到你想要的效果。使用overlay divs来掩盖表行周围的所有内容似乎是一种更可行的方法。

#1