overlay

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

overlay は CSS のプロパティで、最上位レイヤーに現れる要素（例えば、表示されたポップオーバーやモーダルダイアログ (<dialog>) 要素）が実際に最上位レイヤーにレンダリングされるかどうかを指定します。このプロパティは transition-property 値のリストの中で、 allow-discrete が transition-behavior として設定されている場合にのみ意味を持ちます。

overlay はブラウザーによってのみ設定することができることに注意してください。作成者のスタイルは要素の overlay 値を変更することはできません。しかし、要素に設定するトランジションする要素のリストに overlay を追加することはできます。これにより、最上位レイヤーからの除去が延期され、すぐに消えずにアニメーションが発生するようになります。

メモ: オーバーレイ overlay のアニメーションをトランジションさせるには、 transition-behavior: allow-discrete を設定する必要があります。 overlay のアニメーションは通常の離散アニメーションと異なり、開始状態か終了状態かに関わらず、可視状態（つまり auto）がトランジションの再生時間全体にわたって常に表示されます。

構文

css
/* キーワード値 */
overlay: auto;
overlay: none;

/* グローバル値 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

値

auto

最上位レイヤーに昇格した場合、要素は最上位レイヤーにレンダリングされます。

none

要素は最上位レイヤーにレンダリングされません。

公式定義

初期値none
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類Discrete behavior except when animating to or from none is visible for the entire duration

形式文法

overlay = 
  none  |
  auto

例

ポップオーバーのトランジション

この例では、ポップオーバーが トランジションで非表示から表示させたり戻したりするアニメーションをします。

HTML

HTML は、 popover 属性を使用してポップオーバーとして宣言された <div> 要素と、 popovertarget 属性を使用してポップオーバーの表示コントロールとして指定された <button> 要素を含んでいます。

html
<button popovertarget="mypopover">ポップオーバーを表示</button>
<div popover="auto" id="mypopover">ポップオーバーです。アニメーションします。</div>

CSS

overlay プロパティはトランジションするプロパティのリストにのみ存在しています。 overlay はユーザーエージェントが制御するプロパティなので、トランジション前とトランジション後の状態では宣言されません。

css
html {
  font-family: Arial, Helvetica, sans-serif;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;

  /* 消滅アニメーションの最後の状態 */
  opacity: 0;
  transform: scaleX(0);

  transition:
    opacity 0.7s,
    transform 0.7s,
    overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /* transition: all 0.7s allow-discrete;
  と等価 */
}

/* 有効にするためには、前の [popover]:popover-open ルールの
   後に記述する必要があります。 */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

/* ポップオーバーの背景のトランジション */

[popover]::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* transition: all 0.7s allow-discrete;
  と等価 */
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* 入れ子セレクター (&) は擬似要素を表すことができないので、この開始スタイルルールは入れ子にすることができません。 */

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

アニメーションさせたい 2 つのプロパティは opacity と transform です。これらのプロパティの開始状態にはポップオーバー要素の既定の非表示状態（[popover] で選択）を設定し、終了状態にはポップオーバーの開くための状態（:popover-open 擬似クラスで選択）を設定します。そして、 transition プロパティを設定するには、この 2 つの間でアニメーションします。

アニメーションする要素は、表示されているときは最上位レイヤーに昇格し、非表示のときは最上位レイヤーから除去されるので、 overlay がトランジションする要素のリストに追加されます。これにより、最上位レイヤーからの要素の除去はアニメーションが終わるまで確実に延期されます。このような単純なアニメーションでは大きな違いはありませんが、より複雑なケースではこれを行わないと、要素がオーバーレイからすばやく除去されてしまい、アニメーションがスムーズでなくなったり、効果的でなくなったりすることがあります。また、 transition-behavior: allow-discrete の一括指定には、離散的なトランジションを有効にする値も設定されていることに注意してください。

アニメーションが双方向で動作するようにするには、以下のような手順も必要になります。

  • アニメーションの開始状態を @starting-style アットルール内に設定します。これは予期しない動作を避けるために必要です。既定では、要素の最初のスタイルが更新されたときや、 display 型が none から別の型に変更されたときには、トランジションは発生しません。 @starting-style では、既定で設定されていることを特定の制御された方法で上書きすることができます。これがなければ、出現アニメーションは発生せず、ポップオーバーはただ現れるだけです。
  • display もトランジションする要素のリストに追加されているので、アニメーションする要素は出現アニメーションと消滅アニメーションの両方を通して表示されます（display: block に設定します）。これがなければ、消滅アニメーションでは表示されません。結果的に、ポップオーバーはただ消えてしまいます。この場合も、アニメーションが発生するためには transition-behavior: allow-discrete が必要です。

また、開いた時にポップオーバーの背後に現れる ::backdrop にトランジションを記載して、暗くなるアニメーションを提供していることに注意してください。ポップオーバーを開くための背景を選択するには [popover]:popover-open::backdrop が必要です。

結果

このコードは次のように表示されます。

メモ: ポップオーバーは表示されるたびに display: none から display: block に変化するので、出現トランジションのたびに @starting-style スタイルから [popover]:popover-open スタイルに遷移します。ポップオーバーが閉じられたとき、その [popover]:popover-open 状態から既定の [popover] 状態に遷移します。

このような場合、出現時と消滅時のスタイル設定を異なるものにすることが可能です。この証明はスタイル設定を使用する場合のデモンストレーションの例を参照してください。

仕様書

Specification
CSS Positioned Layout Module Level 4
# overlay

ブラウザーの互換性

BCD tables only load in the browser

関連情報