jQueryを複数設置した場合の優先順位について

質問

同一ページ内に複数のjQueryを用いた場合の優先順位について質問させていただきます。

A：jQueryによるドロップダウンメニュー
B：jQueryによるスライダー
※位置関係はAのすぐ下にBがあるとします。

この場合に、AがBの画像の下に潜り込んでしまいます。
Aを前面に出したいのですが、どういった対処をすれば良いのでしょうか？

とても困っています。
どうかお助け下さい。

回答No.1

fujillin · ベストアンサー

え～っと・・・

『A（ドロップダウンメニュー）、B（スライダー）とも正しく動作しているけれども、画面表示の重なりの上下関係が思うようにならない』という意味ですよね？
多分、コードの優先順位の問題ではなくて、表示の重なり順の問題だけではないでしょうか？
表示上の優先順位は、ほとんどHTMLとCSSに依存しているはずです。（最後に述べる例外を除いて）

想像するところ、HTMLソースでは、Ａに関連する要素が先に記述され、Ｂがその後になっていると思います。
単純にこのままだと、重なった場合にはＡの上にＢが表示されることになります。（多分これが起きているのではないかと思います。）
記載順は変更できないでしょうから、CSSの z-index を利用してＡに関係する要素が、Ｂよりも上に表示されるようにしてあげれば解決しそうに思えます。
z-indexについて
　http://css.uka-p.com/reference/ref2/z-index.html
　http://hp.vector.co.jp/authors/VA022006/css/visualren.html#z-index
　http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#propdef-z-index

一番面倒くさいのは、AやBのjavascriptの中で要素のz-index値が動的に操作されている場合。（あまりないと思いますが）
この場合は、一律のやりかたで制御できるとは限らないので、スクリプトがどのような操作を行っているか内容を確認した上で対処を決めることになるかと思います。
でも、内容的には『ＢよりもＡの要素のz-indexの値が大きくなるようにする』という点は変わりないと思います。

お礼

無事解決しました！
http://css.uka-p.com/reference/ref2/z-index.html
が凄くわかりやすかったです！
本当に助かりました！ありがとうございます！