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

StackOverflow https://stackoverflow.com/questions/836415

  •  08-07-2019
  •  | 
  •  

题

我正在尝试用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周围的边框显示为从前一层中偷看。

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

有帮助吗？

解决方案

如果没有定位，则无法对元素进行分层。

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

其他提示

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

* { margin: 0; padding: 0; }

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

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

一个谦虚的猜测是你的负利润导致了问题。

有时会发生div在css文件中没有任何指示，因此它会自动设置边框或填充到某个像素值。如果您在css中指定img标记，则可以摆脱这种烦人的设置。 我完全赞同立场答案。您必须将您创建的div或其他选择器设置为relativ，static，absolute等。当然可以在CSS W3C学校找到关于位置属性的详尽解释。

希望这可以给予进一步的帮助！

如果没有要查看的图像，很难确切知道发生了什么，但我认为如果你将你想要的图层的z-index增加到9999，然后将z-index下面的图层更改为-100它应该按预期工作。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top