Hide div under some table cells but not another ? - css

Question

In this example
<table>
<tr>
<td class="top">
1 <div id="overlay"></div>
</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="top">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="top">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td class="top">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
CSS:
td {
width:50px;
height:50px;
background:#aaa;
}
#overlay {
top:100px;
left:30px;
background:#0a0;
width:100px;
height:100px;
position:absolute;
z-index:0;
}
.top{
background:#333;
z-index:100;
}
Demo:
http://jsfiddle.net/4dfppb7k/
The overlay move dynamically with the mouse.
How can I make the overlay div goes under the first column ( cells : 1,5,9,13) but over the rest of the table cells ?

Answer 1

z-index only works on element which are positioned. If you add position: relative to your top class, your z-index will have the desired effect.
http://jsfiddle.net/4dfppb7k/1/
.top{
position: relative;
background:#333;
z-index:100;
}

Answer 2

You need to position(position: relative) the tds(1, 5, 9, 13) for the z-index to work.
Also, you could use tr td:first-child to avoid using the .top class.
td {
width: 50px;
height: 50px;
background: #aaa;
}
#overlay {
top: 100px;
left: 30px;
background: #0a0;
width: 100px;
height: 100px;
position: absolute;
z-index: 0;
}
tr td:first-child {
background: #333;
position: relative;
z-index: 1;
}
<table>
<tr>
<td>
1
<div id="overlay"></div>
</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>