Implement depths in XHTML Strict

Question

I would like to implement <div> beneath a <table>, in other words, the div will be visible, as the table has transparent png's in but it will behind the <table>.

Does anyone know how to do this?

I tried float:left and differing z-index's, but to no avail.

Answer 1

You're on the right track. But when using the Z-index, your elements must also be absolute-positioned.

Here's an example using divs, but it may as well be tables...

CSS:

div.top {
   width: 300px;
   height: 200px;
   position: absolute;
   left: 500px;
   top: 50px;
   z-index: 2
}

div.bottom {
   width: 300px;
   height: 200px;
   position: absolute;
   left: 600px;
   top: 100px;
   z-index: 1
}

HTML:

<div class="top">I'm on top</div>
<div class="bottom">I'm below</div>