html - 无法让 z-index 在我的表中工作

Question

我有一个 HTML 表格，其中有一个对象元素和一个 td 父标签内的 span 标签，如下所示:

HTML:

<table class="tableClass">
<tr>
<td class="tdClass"><object data="http://mydata.com"></object><span>My Text</span></td>
</tr>
</table>

现在表格的背景颜色为#999。基本上，使用 z-indexing，我希望元素隐藏在元素后面，但 span 元素应该位于 #999 表格背景之上。我如何实现这一目标？

我的 CSS:

.tableClass{
  background: #999;
}
.tdClass object{
  z-index:999;
}

.tdClass span{
  position: absolute;
  z-index: 1; (if I make it -1, it disappears behind the table background...)
}

目前带有文本的 span 元素位于对象元素的顶部...我希望它位于对象元素的后面和表格背景的前面。

谢谢

Answer 1

.tdClass object 至少需要 position:relative，因为 z-index 仅适用于 block 级元素，而 block 级元素不是位置:静态。尝试以下操作:

.tableClass{
  background: #999;
}
.tdClass object{
  position:relative;
  z-index:999;
}

.tdClass span{
  position: absolute;
  z-index: 1;
}

另见 CSS2.1: 9.9.1 Specifying the stack level: the 'z-index' property :

For a positioned box, the 'z-index' property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a stacking context.