6

我正在尝试在 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 的边距顶部。随着它的减少，您会看到 Box 周围的边框从上一层向外窥视时出现。

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

4

4 回答 4

6

没有定位就不能对元素进行分层。

.graphBoxes {
    position: relative;
    z-index: 1;
    margin-top: -250px;
}
于 2009-05-07T22:46:59.730 回答
0

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

* { margin: 0; padding: 0; }

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

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

一个谦虚的猜测是您的负边距导致了问题。

于 2009-05-07T20:37:52.927 回答
0

有时会发生 div 在 css 文件中没有指示，因此它会自动将边框或填充设置为某个 pix 值。如果您在 css 中指定 img 标签，您可以摆脱这个烦人的设置。我完全同意立场答案。您必须将您创建的任何 div 或其他选择器设置为相对、静态、绝对等。位置属性的详尽解释当然可以在 CSS W3C school 上找到。

希望这可以提供进一步的帮助！

于 2018-07-21T17:25:41.590 回答
-1

如果没有图像，很难准确判断发生了什么，但我认为如果你将想要在顶部的图层的 z-index 增加到 9999，然后将下面的图层的 z-index 更改为 -100，它应该可以按预期工作.

于 2009-05-07T19:07:39.227 回答