【CSS】フェードイン、フェードアウトが汚いとき

Tweet

Category css 2022/04/04

問題

モーダルやダイアログ的なものをフェードイン、フェードアウトで表示させているとき、下にある要素が上に浮き出てくることがあります。

z-index的には下のはずなのに、どうして上に出てくるのでしょう？

答え

重ね合わせコンテキスト (Stacking context、スタッキングコンテキスト) というもの。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

opacityが1未満、transform、filter などを適用すると、重ね合わせが変わってくる。

フェードアウト、フェードインしたいときに、z-indexの指定のない親要素などにopacityを適用すると、重ね順が急に変わって、重ね順的に下に持っていかれる場合がある。

例）z-index:1000 でも、z-index:なし の親要素の中にいたら、半透明にしたときに、別の z-index:100 の要素の下になる。

z-indexの指定のない要素を半透明にすると発生するので、きれいにフェードイン、フェードアウトするには、opacityを適用したい要素にもちゃんとz-indexを指定すること。