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

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

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

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

コメント

このブログの人気の投稿

FacebookアプリのSMSアップデートの通知をオフにする

【解決!】InDesignのエラー「ファイルが存在しないか、ファイルへのアクセス権がないか、またはファイルが別のアプリケーションで使用されている可能性があります。」

Adobe Photoshop CS6の自動保存機能のファイル保存場所

子どもがマイクラPEで、友だちとオンラインマルチプレイをやりたいと言い出したときの話。

Healbe Gobeが来た! ファースト レビュー。