ロールオーバーで画像拡大、z-index
下記の様にjavascriptとcssで、
サムネイル画像をロールオーバーしたら拡大画像が表示されるように設定しました。
しかしz-indexが効かずに拡大画像がほかのサムネイル画像の下に表示されてしまいます。
z-indexの対処方法などいろいろ調べ試してみたのですが、
うまくいきませんでした。
どのようにすればうまく表示できるか教えていただけないでしょうか。
よろしくお願いします。
<html>
<head>
<title>テスト</title>
<script type="text/javascript">
<!--
function setStyle(thum,vType)
{
document.getElementById(thum).style.visibility = vType;
}
//-->
</script>
</head>
<body>
<p style="margin-top:50px;">
<div style="position:relative; float:left;">
<div id="thum1" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')" style="border:0px; z-index:2;">
<img src="thum1.png" width="100" height="100">
</div>
<div id="thum2" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')">
<img src="thum2.png"" style="border:1px solid #dedede;" width="200" height="200">
<div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;">
<b><center>テスト1</center></b>
</div>
</div>
</div>
<div style="position:relative; float:left;">
<div id="thum3" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')" style="border:0px; z-index:2;">
<img src="thum3.png" width="100" height="100">
</div>
<div id="thum4" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')">
<img src="thum4.png"" style="border:1px solid #dedede;" width="200" height="200">
<div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;">
<b><center>テスト2</center></b>
</div>
</div>
</div>
<div style="position:relative; float:left;">
<div id="thum5" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')" style="border:0px; z-index:6;">
<img src="thum5.png" width="100" height="100">
</div>
<div id="thum6" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')">
<img src="thum6.png"" style="border:1px solid #dedede;" width="200" height="200">
<div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;">
<b><center>テスト3</center></b>
</div>
</div>
</div>
</p>
</body>
</html>
お礼
返信ありがとうございます！ そのソースは記述していなかったので<head>～</head>間にいれてみたのですが、 残念ながら解決しませんでした。 やはり、absoluteが利いてしまっているんでしょうか・・・；；