Z-表tr上的索引在全局覆盖上

Question

我想定位一个特定的tr从一个表之上的一个全局覆盖。我尝试了这段代码，但没有成功：

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

有什么想法吗？

这是一个小提琴

这是预期的结果：

​

​

Answer 1

将display属性设置为tr上的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>

​