如何强制CSS边框显示在分层页面上?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (218)

我试图用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.GraphBox的css中-250 px的边距。当这种情况减少时,你将看到Box周围的边框在从前一层向外窥视时出现。

在这种情况下可以显示边界吗?谢谢.。

提问于
用户回答回答于

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

.graphBoxes {
    position: relative;
    z-index: 1;
    margin-top: -250px;
}
用户回答回答于

你可能只需调整您的边距和垫片,使边框显示你想要的方式。我的建议是去掉所有的填充和边距,然后添加

* { margin: 0; padding: 0; }

到样式表的顶部。然后调整所有的垫片和边距,宽度和高度。

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

扫码关注云+社区

领取腾讯云代金券