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;
}

どうすれば添付画像のようにいきますか？

回答No.1

ORUKA1951 · ベストアンサー

ごく簡単に
★スタイルシート、画像なしでも情報が伝わるように
★ウィンドウ巾に関わらずきちんと表示できるように(最小640pxでスマートフォンにも対応)
★余計なidやclass名はつけない。後でわからなくなります。
★熊さんは透明化GIFにしましょう。

<div class="header" id="Top">
＿<h1><img src="wp-content/uploads/2011/12/blk_03.jpg" width="177" height="67" alt="Art・・"></h1>
＿<div class="nav">
＿＿<ul>
＿＿＿<li><a href=""><img src="wp-content/uploads/2011/12/blk_05.jpg" width="85" height="67" alt="Product" /></a></li>
＿＿＿<li><a href=""><img src="wp-content/uploads/2011/12/blk_06.jpg" width="85" height="67" alt="contact" /></a></li>
＿＿＿<li><a href=""><img src="wp-content/uploads/2011/12/blk_07.jpg" width="85" height="67" alt="info" /></a></li>
＿＿</ul>
＿</div>
＿<div class="siteImage">
＿＿<p><img src="wp-content/uploads/2011/12/blk_09.jpg" width="980" height="580" alt="" class="big" /></p>
＿＿<p><img src="wp-content/uploads/2011/12/blk_03.png" width="180" height="123" alt="" class="top" /></p>
</div>

[CSS]
html,body{margin:0;padding:0;}
div.header{border:sold 1px solid;}
div.header h1{position:absolute;top:0;left:0;}
div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul{display:block;height:67px;width:100%;text-align:right;}
div.header div.nav ul li{display:inline;width:85px;}
div.header div.siteImage{position:relative;width:100%;min-width:640px;}
div.header div.siteImage img.big{width:100%;height:auto;display:block;}
div.header div.siteImage img.top{position:absolute;top:-80px;left:160px;}

お礼

なるほど。。。。すごいわかりやすいです。

透明にするとはpngで書きだすと解釈してよろしいのでしょうか？

これは本当にわかりやすいご説明でした！
ありがとうございます！

補足

div.header div.siteImage img.top{position:absolute;top:-80px;left:160px;の部分なのですが、なぜleftが１６０ｐｘなのですか？？

回答No.2

神崎 渉瑠（@taloo）

blk_04.jpgに熊の絵、blk_09.jpgに歯（？）の絵を合成してはダメなのでしょうか？

top、leftを指定してください。
z-indexはあまり関係ないと思います。

お礼

画像にしてしまうとスライドするたびに歯が動いてしまうので別々にしたかったんです。

z-indexはあまり関係ないんですね・・・勉強なります。