Question

我有一个HTML表，在一个td父标记内有一个object元素和一个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 Specifying the stack level: the 'z-index' property：

对于定位框，＆＃39; z-index＆＃39; property指定：


当前堆叠上下文中框的堆栈级别。

框是否建立堆叠上下文。

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

1 个答案: