z-index on table tr above global overlay

Question

I want position a specific tr from a table above a global overlay. I tried this code without success :

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

Any idea?

This is a jsfiddle

This is the expected result:

Answer 1

Setting the display property to block on your tr will make the layer come above the overlay.

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>