table tr 上的 z-index 高于全局覆盖

Question

我想将 table 中的特定 tr 定位在全局叠加层之上。我尝试了这段代码但没有成功：

HTML

<table>
  <tr class="tr-1">
    <td>test</td>
  </tr>  
  <tr class="tr-2">
    <td>test</td>
  </tr>
</table>
<div class="overlay"></div>

CSS

tr {
  background-color: white;
}

tr.tr-1 {
  position: relative;
  background-color: red;
  z-index: 20;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  opacity: .3;
  z-index: 10;
}

有什么想法吗？

这是一个jsfiddle

这是预期的结果：

Answer 1

在 tr 上将 display 属性设置为 block 将使图层位于叠加层之上。

tr {
  background-color: white;
}

tr.tr-1 {
  position: relative;
  background-color: red;
  z-index: 20;
  display:block;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  opacity: 1;
  display:block;
  z-index: 10;
}

<table>
  <tr class="tr-1">
    <td>test</td>
  </tr>  
  <tr class="tr-2">
    <td>test</td>
  </tr>
</table>

<div class="overlay"></div>

table tr 上的 z-index 高于全局覆盖

z-index on table tr above global overlay

css

html-table

z-index