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仅适用于不是position:static. 尝试以下操作：

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

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

另请参阅CSS2.1：9.9.1 指定堆栈级别：“z-index”属性：

对于定位框，“z-index”属性指定：

1. 当前堆栈上下文中盒子的堆栈级别。
2. 盒子是否建立堆叠上下文。