表tr上的z-index高于全局叠加

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;