z-indexについて...
今回添付画像のように画像の上にアイコンを置きたかったのですがうまくいきません。
http://snapkidz.biz/wp/
cssのz-indexを使って熊のアイコンをpngで表示させればうまくいくのかな?と思ったのですが、うまく表示できませんでした。
ソースです。
<div id="header">
<ul class="haeder_bak">
<li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" />
<li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_04.jpg" /></li>
<li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_05.jpg" /></li>
<li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_06.jpg" /></li>
<li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_07.jpg" /></li>
</ul>
<div class="header_slider">
<img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_09.jpg" />
</div>
<div class="header_bear">
<img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" />
</div>
</div>
CSSです。
#header{
width:100%;
margin-top:15px;
position :relative;
z-index:0;
}
#header li{
float:left;
}
#header ul{
list-style-type:none;
}
.haeder_bak{
poaition:abosolute;
z-index:10;
}
.header_slider{
poaition:abosolute;
z-index:20;
}
.header_bear{
poaition:abosolute;
z-index:30;
}
どうすれば添付画像のようにいきますか?