如何定位 DIV 标记以悬停（z-index）在表格单元格上答案

【问题标题】：How to position a DIV tag to hover (z-index) over a table cell如何定位 DIV 标记以悬停（z-index）在表格单元格上
【发布时间】：2010-09-23 01:58:54
【问题描述】：

这听起来应该很容易，但由于某种原因，它不像我预期的那样工作。我的 HTML 大致如下所示：

<TD align="center">
<DIV style="position: relative; z-index: 2; top: 0; left: 0; width: 100%; height: 100%">
</DIV>
<SELECT DISABLED>
<OPTION>Option 1
<OPTION>Option 2
</SELECT>
</TD>

基本上，我希望 DIV 标记悬停在单元格上（z-index，而不是垂直顶部），然后弄乱 DIV 的不透明度和颜色，以便看起来整个单元格被禁用（而不仅仅是选择标签）。

背后的故事是我想禁用 SELECT 标记，然后提供一个工具提示来向用户解释它为什么被禁用。问题是一旦我禁用了 SELECT 标签，它也会禁用鼠标悬停事件，所以我不能做工具提示。

在这方面的任何帮助都会很棒！

【问题讨论】：

标签： html css z-index

【解决方案1】：

我相信这些方法会奏效：

<TD align="center" style="position: relative; z-index: 1;">
<DIV style="position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%">
</DIV>
<SELECT DISABLED>
<OPTION>Option 1
<OPTION>Option 2
</SELECT>
</TD>

除非父元素也被定位，否则 div 上的定位将无法正常工作

【讨论】：

谢谢！这看起来很接近，但它的渲染在左上角并占据了全屏。我尝试将其更改为相对，但看起来它消失了。有什么想法吗？
是的，是的，抱歉，试试“display: block;”在父 TD 上，我也进行了快速测试，这不应该弄乱您行中其他 td 的显示方式