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

我正在尝试用html编写方框图和胡须图。问题是，我在div周围有边框（如框中所示），但是当覆盖上一层时，这些边框会消失，上一层包含带状彩色图像。如果我可以避免的话，最好不要在这里使用背景图像（或颜色）

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>

注意div.graphbox的css中的页边距顶部为-250px。当此值减小时，您将看到框周围的边框从上一层向外窥视时出现

---

在这种情况下可以显示边界吗？谢谢…

如果没有图像看，很难准确地说出发生了什么，但我认为如果你将顶部图层的z索引增加到9999，然后将下面图层的z索引更改为-100，它应该可以正常工作

您可能只需要调整边距和填充，使边框显示您想要的方式。我的建议是删除所有的填充和边距，然后添加

* { margin: 0; padding: 0; }

到样式表的顶部。然后调整所有填充物和边距、宽度和高度，使其看起来像你的感觉

请记住，z-index不适用于样式表中没有position属性的元素

---

一个简单的猜测是，您的负边距导致了问题。

您不能在没有定位的情况下对元素进行分层

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

---

有时，div在css文件中没有指示，因此它会自动将border或padding设置为某个pix值。如果你在css中指定标记img，你可以摆脱这个恼人的设置。 我完全同意你的回答。您必须将创建的任何div或其他选择器设置为relative、static、absolute等。当然可以在CSS W3C school上找到位置属性的详尽解释

---

希望这能给进一步的帮助

Z-index仅适用于定位元素（CSS中的aka position属性）。顺便说一句-此标记/CSS还有其他问题，但我对您的约束程度知之甚少。re 33%的单元格宽度；我从html中删除了另外两个相同的单元格。无论如何，这都解决了它！有趣的是，黑线图像分层正确，但位置声明使div边框和背景色出现。谢谢

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