Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.overflow.overlay
非推奨
114
114
112
12
114
12
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 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

CSS Overlay demo.

プレビュー全画面表示

auto

CSS Auto demo.

プレビュー全画面表示

scroll

CSS Scroll demo.

プレビュー全画面表示

実務での使いどころ

  • レガシーコードの互換性維持

    過去にoverlay値を使用していたコードベースが、モダンブラウザでも正常に動作することを保証します。

注意点

  • 新規開発ではoverflow: autoを使用してください。overlayは互換性のためのエイリアスであり、将来的に非推奨となる可能性があります。

アクセシビリティ

  • スクロール可能なコンテナにはtabindex属性を付与し、キーボードユーザーがスクロール操作できるようにしてください。