How to force css borders to display on layered page?

Question

Hello, 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

It's hard to tell exactly what's going on without an image to see, but I think if you increase the z-index of the layer you want on top to 9999 and then change the layer beneath's z-index to -100 it should work as expected.

Answer 2

You probably just have to adjust your margins and paddings to make the borders show the way you want to. My tip is to remove all padding and margin, and add

* { margin: 0; padding: 0; }

to the top of your stylesheet. Then adjust all paddings and margins, widths and heights to make it look like you feel.

Keep in mind that z-index does not apply to elements which has no position-property in the stylesheet.

A humble guess is that your negative margin is causing the problems.

Answer 3

You can't layer an element without having positioning.

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