« ココログのカスタムCSSの編集~プルダウンメニューの作成~ | トップページ | CSSの書き方いろいろ »

2008年2月15日 (金)

IEとFirefoxでz-indexの扱いが異なる

CSSのz-index指定を行った場合、InternetExplorerとFirefoxで表示が異なることがあります。例えば、あるCSS,HTMLをIEとFirefoxで表示したとき、次のように異なった表示になります。


Firefoxの表示

IEの表示

このように表示が異なってくる理由は、

z-indexの扱いに違いがあるためのようです。この例のHTMLは次のようなものです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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で同じ表示になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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>

この結論は、いろいろ試した結果から推測したものなので、実際は異なるかもしれません。

« ココログのカスタムCSSの編集~プルダウンメニューの作成~ | トップページ | CSSの書き方いろいろ »

コメント

なるほど、そういうことでしたか。お蔭さまで解決しました。

助かりました。有益な情報ありがとうございます。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/40127340

この記事へのトラックバック一覧です: IEとFirefoxでz-indexの扱いが異なる:

» [mootools] 簡単なドロップダウンメニューの作り方 [WebTecNote]
mootoolsによる簡単なドロップダウンメニューの作り方。エフェクトを使えば表現の幅がひろがりんぐです ... [続きを読む]

« ココログのカスタムCSSの編集~プルダウンメニューの作成~ | トップページ | CSSの書き方いろいろ »