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>

Answer 2

z-index only works on absolutely positioned elements. You could try setting position: absolute and then using the top, right, bottom, left styles to position the elements on top of each other.

You could also try putting the <div> in front of the table in the markup, set float: left on the div, and them move the table left, to position it on top of the div, by using a negative margin-left value.

For example:

<div id="d1"></div>
<div id="d2"></div>

Using the following CSS, the second div would be 50px into the first div.

div {
    width: 100px;
    height: 100px;
    border: solid 1px rgb(0, 0, 0);
}
#d1 {
    float: left;
    background-color: rgb(255, 0, 0);
}
#d2 {
    float: left;
    margin-left: -50px;
    background-color: rgb(0, 255, 0);
    opacity: 0.5;
}

The second div there would be your table. Just easier to demonstrate with divs :)

Answer 3

Just to add to the previous two answers. Z-index is not limited to only those elements that are positioned absolutely. Z-index also works on elements that have relative positioning.