6

Box と Whiskers のグラフを 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>

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 に注意してください。これを減らすと、ボックスの周囲の境界線が前のレイヤーからはみ出して表示されます。

この場合、境界線を表示することは可能ですか? ありがとう...

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 は、スタイルシートに position-property がない要素には適用されないことに注意してください。

控えめな推測では、あなたの負のマージンが問題を引き起こしているということです。

于 2009-05-07T20:37:52.927 に答える
-1

画像がないと何が起こっているのかを正確に伝えるのは難しいですが、一番上にしたいレイヤーの z-index を 9999 に増やしてから、下のレイヤーの z-index を -100 に変更すると、期待どおりに動作するはずです.

于 2009-05-07T19:07:39.227 に答える