overflow: overlay
overflow: overlayは歴史的にスクロールバーをレイアウトスペースを消費せずにコンテンツ上に重ねて表示する非標準の値でした。現在ではoverflow: autoの標準的なエイリアスとして扱われます。レガシーコードとの互換性のために存在しますが、新規開発ではoverflow: autoの使用が推奨されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.overflow.overlay 非推奨 | 114 | 114 | 112 | 12 | 114 | 12 |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (114)
対応条件
- バージョン 114 より前では、「overlay」キーワードにより非標準の動作が発生し、スクロールバーがレイアウト スペースを占有せずにコンテンツをオーバーレイできるようになっていました。 バージョン 114 以降、キーワードは標準の「auto」キーワードの別名になります。 バグ 40444262 を参照してください。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (114)
対応条件
- バージョン 114 より前では、「overlay」キーワードにより非標準の動作が発生し、スクロールバーがレイアウト スペースを占有せずにコンテンツをオーバーレイできるようになっていました。 バージョン 114 以降、キーワードは標準の「auto」キーワードの別名になります。 バグ 40444262 を参照してください。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (12)
実装メモ
- バージョン 12 より前では、「overlay」キーワードにより非標準の動作が発生し、スクロールバーがレイアウト スペースを占有せずにコンテンツをオーバーレイできるようになっていました。 バージョン 12 以降、キーワードは標準の `auto` キーワードのエイリアスになります。 バグ 189811 を参照してください。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (114)
対応条件
- バージョン 114 より前では、「overlay」キーワードにより非標準の動作が発生し、スクロールバーがレイアウト スペースを占有せずにコンテンツをオーバーレイできるようになっていました。 バージョン 114 以降、キーワードは標準の「auto」キーワードの別名になります。 バグ 40444262 を参照してください。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (12)
実装メモ
- バージョン 12 より前では、「overlay」キーワードにより非標準の動作が発生し、スクロールバーがレイアウト スペースを占有せずにコンテンツをオーバーレイできるようになっていました。 バージョン 12 以降、キーワードは標準の `auto` キーワードのエイリアスになります。 バグ 189811 を参照してください。
基本構文
CSS
.container {
overflow: overlay;
/* Equivalent to overflow: auto */
}ライブデモ
実務での使いどころ
-
レガシーコードの互換性維持
過去にoverlay値を使用していたコードベースが、モダンブラウザでも正常に動作することを保証します。
注意点
- 新規開発ではoverflow: autoを使用してください。overlayは互換性のためのエイリアスであり、将来的に非推奨となる可能性があります。
アクセシビリティ
- スクロール可能なコンテナにはtabindex属性を付与し、キーボードユーザーがスクロール操作できるようにしてください。