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）之下，而不是表格单元格的其余部分？

Answer 1

z-index仅适用于定位的元素。如果您将position: relative添加到top课程，则z-index会产生预期效果。

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

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

Answer 2

您需要position（position: relative）td s（1,5,9,13）才能使z-index正常工作。

此外，您可以使用tr td:first-child来避免使用.top类。

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而不是另一个

2 个答案: