如何强制css边框显示在分层页面上？

Question

我正在尝试用html编写Box和Whiskers图.问题是,我有一个div的边框(如Box中),但是当覆盖包含带状彩色图像的前一层时,这些边框会消失.如果我可以避免使用背景图像(或颜色),则首选.

html是:

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

而css是:

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;
}

注意div.graphBoxes的css中-250px的margin-top.随着这个减少,你会看到Box周围的边框显示为从前一层中偷看.

在这种情况下是否可以显示边框？谢谢...

Answer 1

没有定位就无法对元素进行分层.

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