css - 表 tr 上的 z 索引位于全局叠加层上方

Question

我想将表格中的特定 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>