レイヤードページにCSSの境界線を強制的に表示する方法は？

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

  •  08-07-2019
  •  | 
  •  

質問

BoxグラフとWhiskersグラフをhtmlでコーディングしようとしています。問題は、（Boxなどの）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のマージン上部に注意してください。これが減少すると、前のレイヤーから覗くと、ボックスの周囲の境界線が表示されます。

この場合、境界線を表示することはできますか？ありがとう...

役に立ちましたか？

解決

位置付けなしに要素を階層化することはできません。

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

他のヒント

おそらく、余白とパディングを調整するだけで、境界線が希望どおりに表示されるようになります。私のヒントは、すべてのパディングとマージンを削除し、追加することです

* { margin: 0; padding: 0; }

スタイルシートの一番上に。次に、すべてのパディングとマージン、幅と高さを調整して、あなたが感じているように見せます。

z-indexは、スタイルシートに位置プロパティのない要素には適用されないことに注意してください。

控え目な推測は、マイナスのマージンが問題を引き起こしているということです。

場合によっては、divがcssファイルに表示されないことがあるため、自動的に境界線またはパディングをpix値に設定します。 CSSでimgタグを指定すると、この迷惑な設定を取り除くことができます。 私はポジションアンサーに完全に同意します。 div、または相対、静的、絶対などとして作成する他のセレクターを設定する必要があります。もちろん、CSS W3Cスクールで位置プロパティの包括的な説明を見つけることができます。

これがさらに役立つことを願っています！

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top