Question

I have an HTML table with an object element and a span tag inside one td parent tag like so:

HTML:

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

Now the table has a background color of #999. Basically, with z-indexing, I want the element to hide behind the element, but the span element should be on top of the #999 table background. How do I achieve this?

My 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...)
}

Currently the span element with the text is on top of the object element…I want it behind the object element and infront of the table background.

Thank You

Answer 1

.tdClass object needs at least position:relative, as z-index will only work on block-level elements which aren’t position:static. Try the following:

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

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

See also 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.