z-index in table

why z-index is not working?

HTML

<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="tab">tab</td>
        <td class="plan">plan</td>
        <td class="plan">plan</td>
        <td class="plan">plan</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

div {
  position: relative;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: red;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: white;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -15;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
}