Z-Index and stacking context

z-Index and stacking context using html table

by johntrepreneur

HTML

<table>
<tbody>
<tr>
  <td><div>1</div></td>
  <td class="active">
    <div>
      2
      <div id="shift1">T 9-4pm</div>
      <div id="drag-handle"></div>
    </div>
  </td>
  <td><div>3</div></td>
</tr>
<tr>
  <td><div>4</div></td>
  <td class="active">
    <div>
      5
      <!--<div id="drag-handle-2"></div>-->
    </div>
  </td>
  <td><div>6</div></td>
</tr>
</tbody>
</table>

CSS

td {
  position: relative;
  z-index: 2;
}
.active {
  z-index: 0;
}
tr:first-child td:first-child + td {
  z-index: 1;
  background-color: lightgrey;
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
}
td {
  background-color: #f1f1f1;
  height: 50px;
  width: 100px;
}
.active{
  background-color: #555555;
}
#drag-handle {
  height: 25px;
  width: 70px;
  background-color: lightgreen;
  position: absolute;
  bottom: -15px;
  left: 15px;
}
#drag-handle-2 {
  height: 25px;
  width: 70px;
  background-color: lightblue;
  position: absolute;
  top: -15px;
  left: 15px;
}
#shift1 {
  font-size: 10px;
  background-color: lightpink;
  height: 13px;
  width: 60px;
  position: absolute;
  top: 5px;
  left: -19px;
}