IE6で、プルダウンメニューなどの重なり順がおかしくなる

jQueryなんかをつかってプルダウンメニュー(ドロップダウンメニュー)を作ったときに、当然ながらサブメニューはきちんと全部見えて欲しいのに、IE6で別の要素の裏に隠れてしまうことがある。

IE6では、positionにstatic(デフォルト値)以外を指定したときに、自動的に登場順にz-indexが割り振られるようで、後に登場する要素が上になることが原因。
まぁ、考えてみれば、これは不自然な仕様じゃないのかな?
それぞれの要素にきっちりz-indexを指定してあげれば解決します。

一応注意点としては、HTMLは、親、子、孫というように、箱の中に要素を入れていくように階層化されているので、孫の中でどんなに大きなz-indexを指定しても、親が下になっているとダメ。
なので、ドロップダウンメニューを使うときは、なるべく上流の方で、安心できるz-indexにしてしまうのがコツでしょう。

コメント