【CSS】フェードイン、フェードアウトが汚いとき
問題
モーダルやダイアログ的なものをフェードイン、フェードアウトで表示させているとき、下にある要素が上に浮き出てくることがあります。
z-index的には下のはずなのに、どうして上に出てくるのでしょう？
答え
重ね合わせコンテキスト (Stacking context、スタッキングコンテキスト) というもの。
opacityが1未満、transform、filter などを適用すると、重ね合わせが変わってくる。
フェードアウト、フェードインしたいときに、z-indexの指定のない親要素などにopacityを適用すると、重ね順が急に変わって、重ね順的に下に持っていかれる場合がある。
例）z-index:1000 でも、z-index:なし の親要素の中にいたら、半透明にしたときに、別の z-index:100 の要素の下になる。
z-indexの指定のない要素を半透明にすると発生するので、きれいにフェードイン、フェードアウトするには、opacityを適用したい要素にもちゃんとz-indexを指定すること。
コメント