z-index in table

why z-index is not working?

by Mohammad Ghanbari

HTML

<div class="bottom">
  <table>
    <tbody>
      <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>
      <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;
  z-index: 5;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: white;
  box-shadow: 1px 3px 6px rgba(0,0,0,0.20), 1px 6px 12px rgba(0,0,0,0.15);
}

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

td.tab {
  background-color: white;
  padding: 15px;
  width: 10%;
  position: absolute;
  z-index: -15;
  right: 100%;
  box-shadow: 1px 3px 6px rgba(0,0,0,0.20), 1px 6px 12px rgba(0,0,0,0.15);
}

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