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です。

[amazonjs asin=”4873117259″ locale=”JP” title=”CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計”]

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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