CSS - overlay

• トップ
• CSSリファレンス
• overlay

概要

説明

ポップオーバー(popover) や ダイアログ(<dialog>) など、最上位レイヤで display:none と 非none が切り替わる要素に対して transition-behavior:allow-discrete を指定して トランジション を行う際に意味を持ちます。

none

最上位レイヤにレンダリングしません。

auto

最上位レイヤに昇格した際、最上位レイヤにレンダリングします。

使用例

このプロパティを直接操作することはありません。表示・非表示が切り替わる際にブラウザが変更します。トランジションをプロパティ毎に設定している場合は、display に加えて overlay にもトランジションを設定する必要があります。シンプルなトランジションであれば overlay を指定しなくてもそれほど見栄えに影響はありませんが、複雑なトランジションを行う場合 overlay をトランジション対象にしておかないと戻る際のトランジションが完全に完了するまえに要素が画面から消えてしまうことがあります。

[popover] {
  transition:
    transform .3s,
    opacity .3s,
    display .3s allow-discrete,
    overlay .3s allow-discrete;
}

下記の様に暗黙的に全プロパティに対してトランジション設定している場合は必要ありません。

transition: all .3s;  /* all を指定している場合 */
transition: .3s;               /* all も省略している場合 */

リンク

• https://drafts.csswg.org/css-position-4/#overlay
• https://developer.mozilla.org/ja/docs/Web/CSS/overlay
• https://caniuse.com/mdn-css_properties_overlay