News & Information

~ 良いものを創造し、”よろこび”を提供する ~

TOPblog ⟩ CSSのz-indexが効かない!

CSSのz-indexが効かない!

2015/07/03

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

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

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

CSS translateに要注意です。

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

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

解決方法は簡単です。

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

[html]
<div class="slidebar">
<div class="modal"></div>
</div>
[/html]

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

[html]
<div class="slidebar"></div>
<div class="modal"></div>
[/html]

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

仲間大募集!

現状に満足することなく常に新しい技術を学び、問題解決に取り組める方、
積極的に新しいことにチャレンジしたい!とお考えの方、
ご自身のスキル・経験を活かしてお仕事をしたいとお考えの方を
心より、お待ちしております!!

現状に満足することなく常に新しい技術を学び、問題解決に取り組める方、 積極的に新しいことにチャレンジしたい!とお考えの方、 ご自身のスキル・経験を活かしてお仕事をしたいとお考えの方を 心より、お待ちしております!!