将 div 隐藏在某些 table 单元格下，而不是另一个单元格下？

Question

在这个例子中

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

演示：

http://jsfiddle.net/4dfppb7k/

叠加层随鼠标动态移动。

如何使叠加层 div 位于第一列（单元格：1,5,9,13）下方，但位于其余 table 单元格上方？

Answer 1

z-index 仅适用于定位的元素。如果您将 position: relative 添加到您的 top class，您的 z-index 将达到预期的效果。

http://jsfiddle.net/4dfppb7k/1/

.top{
    position: relative;
    background:#333;
    z-index:100; 
}

Answer 2

您需要 position(position: relative) tds(1, 5, 9, 13) 才能使 z-index 工作。

此外，您可以使用 tr td:first-child 来避免使用 .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>

将 div 隐藏在某些 table 单元格下，而不是另一个单元格下？

Hide div under some table cells but not another ?

css

overlay