IE7 に対応させるためにコーディングを行っていたことろ、ドロップダウンが下のブロックレベル要素に潜り込んでしまう事象が発生していました。

他の主要ブラウザでは起きておらず、IE7だけの現象でした。
改めて調べたものをまとめておきます。

どんな問題がおこっていたか

コーディングは下記のような感じでした。

<div id="親A">
 <div id="子A-1">メニューボタン</div>
 <div id="子A-1-1" style="z-index:999;">ドロップダウンの内容</div>
</div>

<div id="親B">
 <div id="子B-1">コンテンツ</div>
</div>

IE7だと、【子A-1-1】が【親B】の下にも潜りこんで隠れてしまいました。

この時【子A-1-1】には既にz-indexが設定済みで、IE７以外のモダンブラウザでは意図したとおりに表示される状況でした。

調べたところ、IE7は親なら親同士、子なら子同士でしかz-indexが効かないとのこと

なのでIE7では上の例を次のように解釈していました。

• 【親A】の表示範囲内で【子A-1】と【子A-1-1】間でz-indexは有効
• 【親A】より【親B】が上である
• なので【親A】からはみ出て表示された【子A-1-1】は、【親B】の下に潜りこむ

解決する方法

• 【親A】に【親B】よりも上になるようにz-indexを指定
• 同時に【親A】と【親B】に、position:relativeを指定。position指定しないと、z-indexが有効にならないため。

<div id="親A" style="z-index:200; position:relative;">
 <div id="子A-1">メニューボタン</div>
 <div id="子A-1-1" style="z-index:999;">ドロップダウンの内容</div>
</div>

<div id="親B" style="z-index:100; position:relative;">
 <div id="子B-1">コンテンツ</div>
</div>

IE7の公式サポートももうすぐ終わりますが、まだまだIE7対応も必要とされていますので、まだまだ油断はできませんね（苦笑）