Question

在第二个表格单元格中，我有一个div，我想要绝对位于<td>之外。目前我有这个，但问题是位于此<td>'s下面的<td>出现在div的顶部。最后，我将在每个<td>内部设置div，它们将出现在翻转中。这是一个问题的图片，橙色<td>就是当我把鼠标放在它上面时。那么如何定位div以使其显得最顶端。不确定我是否正确使用z-index。

链接到图片：Snapshot of Issue

这是相关的CSS：

td.link {
    position: relative;
    z-index: 100;
}

td div {
    height: 200px;
    width: 200px;
    position: absolute;
    top: -20px;
    right: -100px;
    background: #CCC;
    z-index: 500;
}

HTML：

    <table>
      caption>Emails For MPC Clients</caption>
      <thead>
         <th>Email</th>
         <th>Link</th>
         <th>Modified</th>
     </thead>
     <tr>
          <td>Live Webinar</td>
          <td class="link">
               <a href="#" target="_blank">liveWebinar.html</a>
              <div>
                  <h2>Some Content goes in here</h2>
              </div>
          </td>
           <td class="date">02/02/2012</td>
      </tr>
   </table>

Answer 1

您正确使用Z-Index，因此不是问题。尝试相对定位你的桌子，看看是否能让你进入球场。

table {
position:relative;
    z-index: 100
}

td.link {
    position: relative;
    z-index: 200;
}

td div {
    height: 200px;
    width: 200px;
    position: absolute;
    top: -20px;
    right: -100px;
    background: #CCC;
    z-index: 500;
}

Answer 2

我会删除表格并使用标准div进行所有操作。然后相应地使用z-index将其他div放在

之上

最好避免使用表格

如何将div完全堆叠在表格单元格之上

2 个答案: