CSSのz-indexが効かない!

z-indexを調整してもなぜだか後ろに隠れてしまう。そんなことに出会ったことありませんか?
powerpoint-27539_640

以下に参考サイトがありました。

z-indexで重なりが直らない場合はtransformのz軸を疑ってみる

CSS translateに要注意です。

translateを使っていると効かなくなります。

私の場合は、SliderBarのJSプラグインを入れていたため、その中を調べてみるとtranslateを使っていました。
これが原因か、とわかったんですが、その上にmodalで表示したいのですが、SlideBarのJSプラグインを修正なんてしてる暇がないわけで。

解決方法は簡単です。

SlideBarJSプラグインの多くは、全体を囲むように指示があったりしますので以下のようになっている場合が多いです。

<div class="slidebar">
<div class="modal"></div>
</div>

それを外に出して同一レベルにする。

<div class="slidebar"></div>
<div class="modal"></div>

slidebarの制御外にすればよいってことですね。あとうあ、slidebarとmodalのz-index調整でOKです。

コメントを残す

%d人のブロガーが「いいね」をつけました。