IEとFirefoxでz-indexの扱いが異なる
CSSのz-index指定を行った場合、InternetExplorerとFirefoxで表示が異なることがあります。例えば、あるCSS,HTMLをIEとFirefoxで表示したとき、次のように異なった表示になります。
 |
 |
このように表示が異なってくる理由は、
z-indexの扱いに違いがあるためのようです。この例のHTMLは次のようなものです。
<html>
<head>
<style type="text/css">
div.level1 {
width:220px;
height:265px;
position:absolute;
border:solid black 1px;
}
div.level2 {
width:150px;
height:100px;
position:absolute;
border:solid black 1px;
}
div.level3 {
width:100px;
height:70px;
position:absolute;
border:solid black 1px;
}
</style>
</head>
<body>
<div class="level1" style="background:#99f">
<div class="level2" style="top:20px; left:20px; background:#500">
<div class="level3" style="top:20px; left:20px; background:#f33; z-index:23"></div>
<div class="level3" style="top:40px; left:40px; background:#d33; z-index:22"></div>
<div class="level3" style="top:60px; left:60px; background:#b33; z-index:21"></div>
<div class="level3" style="top:80px; left:80px; background:#933; z-index:20"></div>
</div>
<div class="level2" style="top:120px; left:20px; background:#060">
<div class="level3" style="top:20px; left:20px; background:#3f3; z-index:13"></div>
<div class="level3" style="top:40px; left:40px; background:#3d3; z-index:12"></div>
<div class="level3" style="top:60px; left:60px; background:#3b3; z-index:11"></div>
<div class="level3" style="top:80px; left:80px; background:#393; z-index:10"></div>
</div>
</div>
</body>
</html>
いろいろ試してみるとfirefoxとIEとでは解釈の優先順が異なっているようです。
- firefoxの場合
- z-index指定が何より優先
- z-indexの数値の大きいものが必ず前面に表示され、指定のないものは後ろ面に表示される
- z-indexの数値が同じものや、z-index指定がないものは、HTMLで後に書かれているブロックが前面に表示される
- IEの場合
- HTMLに書かれている順番が優先される。
- HTMLで、後に書かれているブロックが前面に表示される。
- z-indexの数値は、ブロック内の順番の指定になるが、ブロックをまたいで解釈されることはない。
ということのようです。この例で、IEでの表示をfirefoxと同じ表示にするには"Level2"のdivブロックにz-index指定をする必要があります。次のようにLevel2にz-indexを指定すればIEとfirefoxで同じ表示になります。
<html>
<head>
<style type="text/css">
div.level1 {
width:220px;
height:265px;
position:absolute;
border:solid black 1px;
}
div.level2 {
width:150px;
height:100px;
position:absolute;
border:solid black 1px;
}
div.level3 {
width:100px;
height:70px;
position:absolute;
border:solid black 1px;
}
</style>
</head>
<body>
<div class="level1" style="background:#99f">
<div class="level2" style="top:20px; left:20px; background:#500; z-index:2">
<div class="level3" style="top:20px; left:20px; background:#f33; z-index:23"></div>
<div class="level3" style="top:40px; left:40px; background:#d33; z-index:22"></div>
<div class="level3" style="top:60px; left:60px; background:#b33; z-index:21"></div>
<div class="level3" style="top:80px; left:80px; background:#933; z-index:20"></div>
</div>
<div class="level2" style="top:120px; left:20px; background:#060; z-index:1">
<div class="level3" style="top:20px; left:20px; background:#3f3; z-index:13"></div>
<div class="level3" style="top:40px; left:40px; background:#3d3; z-index:12"></div>
<div class="level3" style="top:60px; left:60px; background:#3b3; z-index:11"></div>
<div class="level3" style="top:80px; left:80px; background:#393; z-index:10"></div>
</div>
</div>
</body>
</html>
この結論は、いろいろ試した結果から推測したものなので、実際は異なるかもしれません。
なるほど、そういうことでしたか。お蔭さまで解決しました。
投稿： | 2008年8月29日 (金) 21時08分