How to force css borders to display on layered page?

Question

I'm attempting to code Box and Whiskers graphs in html. The issue is, I have borders around a div (as in, the Box), but these borders disappear when overlaying the previous layer, which contains a banded color image. The preference is not to use a background image (or colors) here if I can avoid it.

The html is:

<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%">
<tr class="graphArea">
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div>

<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td>
</tr>
</table>

and the css is:

table#BoxAndWhiskers tr.graphArea td {
    width: 33%;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes {
    z-index: 1;
    margin-top: -250px;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox {
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 2px solid black;
}

Note the margin-top of -250px in the css for div.graphBoxes. As this is decreased, you'll see the borders around the Box appear as they peek out from the previous layer.

Is it possible to show the borders in this case? Thanks...

Answer 1

You can't layer an element without having positioning.

.graphBoxes {
    position: relative;
    z-index: 1;
    margin-top: -250px;
}