css z-indexを使った表示順序の入れ替え

質問

cssを勉強中の者です。
もしよければ、知恵をお貸しください。

z-indexを使った表示順序の勉強をしています。
スタイルシートで<div>に背景画像を設置した、その<div>の後ろに文字や画像を表示したいのです。

影が入った画像の後ろ側に、文字などを表示する為にz-indexを使った表示順序の勉強をしています。

<div>や、<h3>の背景に透過設定のpngファイルを使用しています。
タイトル用としてよくある、左側に縦で棒が
下記のソースコード(一部)があります。

<h3 class="sub_title">サブタイトル</h3>
<div class="test_contents">hogehoge</div>

スタイルシート

h3.sub_title {
background:url("./../img/topTitleLong.png") no-repeat;
padding:5px 0px 0px 20px;
height:30px;
font-size:110%;
z-index:2;
}

div.test_contents {
border:5px solid #c0c0c0;
z-index:1;
}

どうしたらうまく重ねることができるのでしょうか？
そもそも、背景画像に設定したものの、さらに奥側に設定できるのでしょうか？

回答No.1

Kensyusei · ベストアンサー

スタイルシートに以下の3行を追加してみてください。

h3, div {
position:absolute;
}

参考URLに解説がありますよ。

参考URL：

http://w3g.jp/css/display_position/z-index