オーバーレイとは｜意味を場面別に・CSS・OverlayFS・配信まで実測

英語の overlay は「上にかぶせる・重ねる」という意味です。どの分野でも「下はそのまま、上に重ねる」という芯は同じで、何を何に重ねるかが場面で変わります。

flowchart LR
    O[オーバーレイ<br>下を残して上に重ねる]
    O --> W[画面<br>ページの上に表示]
    O --> F[ファイル<br>OverlayFS]
    O --> N[ネットワーク<br>VXLAN など]
    O --> V[映像<br>配信のテロップ]
    O --> G[画像<br>合成モード]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS（Linux カーネル 6.18.44）の上で確かめました。Web のオーバーレイは、Python 3.13.18 の http.server を 127.0.0.1 のポートに起動して自作のテストページ（全面を覆う自作のオーバーレイ・pointer-events: none の飾り・<dialog> の showModal()・popover・画像の上の説明文）を置き、Chromium 153.0.8010.12（Playwright 1.63.0・Python 版）で開いて、マウスのクリック・Tab キー・ホイール・Esc キーを送り、document.elementFromPoint() と Chrome DevTools Protocol のアクセシビリティツリーで結果を記録しました。配信用の透明なページは同じ Chromium で背景を抜いたスクリーンショットを撮り、Pillow 12.3.0 で画素の値を読みました。OverlayFS は、作業場所の中のディレクトリだけを使い、unshare -m で作った自分専用のマウント名前空間の中でマウントしました（ホストのマウントは変えていません。util-linux 2.39.3）。オーバーレイネットワークは、名前に t185 を含む2つの ip netns を veth でつなぎ、iproute2 6.1.0 で VXLAN を作って HTTP を流し、tcpdump 4.99.4（.deb を作業場所に展開）で両方の層を記録しました。Docker は CLI 29.9.2 が入っていますが、ホストの設定を変えないため dockerd は起動せず、overlay2・overlay ネットワークは Docker の公式ドキュメントで確かめました。OverlayFS の仕様は Linux カーネルの公式ドキュメント、CSS は MDN、モーダルの操作は W3C の WAI-ARIA Authoring Practices、配信は OBS Studio の公式 Knowledge Base、ふだんの意味は国語辞典・用語集で確かめています。図は mermaid 11.16.0 で描画を確かめました（確認日 2026年10月29日）。

オーバーレイとは（ふだんの意味とITでの意味）

この節では、オーバーレイという言葉のふだんの意味と、IT で使うときの意味の違いが分かります。

オーバーレイは、英語の overlay（上に置く・かぶせる）から来た言葉です。デジタル大辞泉は「グラフィックソフトなどで画像を重ね合わせて表示すること」と説明し、IT 用語辞典 e-Words は、重ねて表示する手法・帳票に重ねて印刷する機能・既存のネットワークの上に作るネットワーク・メモリに分けて読み込む実行方式の4つを挙げています。IT 以外でも、道路の舗装の補修や投資信託の運用手法など、さまざまな分野で使われます。

会話で「オーバーレイ」と出てきたら、まず画面の話か、ファイル・ネットワークの話かを確かめると、取り違えが減ります。Web 制作の打ち合わせなら画面の重ね表示、インフラの打ち合わせなら OverlayFS か overlay ネットワーク、という分かれ方が多くなります。

場面別の意味の一覧（IT・プログラミング）

この節では、IT とプログラミングで「オーバーレイ」と呼ばれるものを、場面ごとに一覧で見分けられます。

同じ「overlay」でも、CSS のプロパティ名、合成モードの名前、Linux のファイルシステム名、Docker のドライバ名は、それぞれ別物です。名前が同じなので、検索結果で別の意味の記事に入ってしまうことがよくあります。

画面のオーバーレイ表示とは（Webで重ねる表示の作り方）

この節では、Web ページでよく見る「全面を覆う半透明の幕」が、どんな CSS でできているかが分かります。

Web のオーバーレイは、画面全体に固定した要素を、ほかの要素より手前に重ねて作ります。ログインを促す表示、画像の拡大表示、読み込み中の幕、Cookie の同意表示などがこれにあたります。下のページは残ったまま、上に重なっているだけです。

/* 全面を覆う半透明の幕 */
.overlay {
  position: fixed;   /* スクロールしても画面に固定 */
  inset: 0;          /* top・right・bottom・left を 0 にして全面を覆う */
  background: rgba(0, 0, 0, .5);
  z-index: 1000;     /* ほかの要素より手前に出す */
  display: none;
  place-items: center;
}
.overlay.is-open { display: grid; }

/* 画像の上に説明文を重ねる（部分的なオーバーレイ） */
.figure { position: relative; }
.figure .caption {
  position: absolute;
  inset: auto 0 0 0;  /* 下端に沿わせる */
  background: rgba(0, 0, 0, .6);
  color: #fff;
}

HTML 側は、幕の中に小窓（パネル）を置きます。コード例では section 要素を使っています。

<section class="overlay" id="ovA">
  <section class="panel" role="dialog" aria-modal="true" aria-labelledby="ovTitle">
    <h2 id="ovTitle">お知らせ</h2>
    <button type="button" id="closeA">閉じる</button>
  </section>
</section>

重ねたはずの要素が後ろに隠れるときは、z-index の数値ではなく、親要素が作る「スタッキングコンテキスト」が原因のことが多くあります。原因の一覧は関連記事「CSS z-indexが効かない｜スタッキングコンテキスト原因一覧」で扱っています。React で親の外へ描き出して重ねる方法は関連記事「React createPortalの使い方｜モーダルとz-index」にまとめています。

オーバーレイで背景のクリック・Tab・スクロールはどうなるか（実測）

この節では、重ね方の違いで、後ろのボタンが押せるか・Tab キーで後ろへ移れるか・後ろがスクロールするかが、実測の表で分かります。

見た目で全面を覆っていても、Tab キーとホイールは後ろのページへ届きました。テストページには「背景のボタン」と「背景のリンク」を置き、5通りの状態で、ボタンの真上のクリック、Tab キー4回、ホイールで 500px 下へ、Esc キーを Chromium に送りました。

「ページ外」は、フォーカスがページの最後から抜けてブラウザの画面側（記録では BODY）へ移ったことを表します。ホイールは5通りすべてで scrollY が 0 から 500 になり、showModal() でも後ろのページはスクロールしました。

別の回では、オーバーレイを開いた直後に Tab キーを押すと、最初のフォーカスが後ろの「背景のボタン」に当たりました。開いたときにフォーカスを小窓の中へ移さないと、キーボードで操作する人は、見えない場所を操作することになります。

スマホ幅（375px）での見え方

同じページを幅 375px・高さ 667px で開くと、幕は 375×667 の全面を覆い、小窓の幅は 177.5px でした。中身の文字数で幅が決まるため、長い文を入れると折り返しが増えます。小窓には max-width: calc(100vw - 32px) のような上限を付けておくと、端で切れずに済みます。

オーバーレイのアクセシビリティ（inert・dialog・モーダルとの違い）

この節では、オーバーレイで後ろを操作させない正しい作り方と、「モーダル」との言葉の違いが分かります。

オーバーレイは「重ねる見た目」、モーダルは「閉じるまで後ろを操作させない仕組み」です。W3C の WAI-ARIA Authoring Practices は、モーダルのダイアログを「主なウィンドウか別のダイアログの上に重ねられたウィンドウ」と説明し、下の内容は操作できない（inert）状態になる、としています。オーバーレイの見た目でモーダルを作るなら、見た目に加えて、後ろを止める処理が要ります。

前の節の自作オーバーレイに、背景の main 要素へ inert を付け、html 要素に overflow: hidden を付けて測り直しました。アクセシビリティツリーは Chrome DevTools Protocol の Accessibility.getFullAXTree で取り、「背景のボタン」が残っているかを見ています。

MDN は inert について、中の要素は「フォーカスを受け取れず、クリックもできない」「タブ順とアクセシビリティツリーから取り除かれる」と説明しています。実測でも、inert を付けた背景はツリーから消え、JavaScript から focus() しても移りませんでした。

• 1後ろを止めたいなら dialog の showModal() を使う背景が自動で操作できなくなり、Esc でも閉じた。自作するなら背景に inert を付ける
• 2開いたらフォーカスを中へ移す自作の幕は、開いた直後の Tab で後ろのボタンに当たった。最初のボタンか見出しへ移す
• 3閉じたら開いたボタンへ戻すWAI-ARIA Authoring Practices は、閉じたら開いた操作の元へフォーカスを戻すとしている
• 4後ろのスクロールは別に止めるshowModal() でも後ろは 500px 動いた。開いている間は html に overflow: hidden を付ける
• 5幕の色で文字が読みにくくならないか見る画像の上の説明文は、背景の画像で明るさが変わる。半透明の黒を敷いてコントラストを保つ

<dialog> でモーダルを作る完成形のコードは関連記事「HTML dialog要素でモーダル実装｜コピペ完成版とa11y対応」で扱っています。モーダルとモードレス・ポップアップの違いと使いどころは、関連記事「モーダルとは｜モードレス・ポップアップとの違いと使いどころを実測で」が詳しく、この記事は「オーバーレイという言葉が何を指すか」の入口として役割を分けています。

CSSの overlay プロパティと overflow: overlay（名前が同じ別物）

この節では、CSS に出てくる2つの「overlay」が、重ね表示を作るものではないことが分かります。

CSS の overlay プロパティは、重ね表示を作る指定ではありません。MDN によると、popover やモーダルの dialog のように「最上位レイヤー（top layer）」に出た要素を、そこに描くかどうかを表す値で、作る側が直接値を変えることはできず、ブラウザだけが設定します。使い道は、閉じるときのアニメーションです。transition の対象に overlay を入れ、allow-discrete を付けると、アニメーションが終わるまで最上位レイヤーから外れるのを待ちます。

/* popover を閉じるときにも、フェードアウトを見せる */
[popover] {
  opacity: 0;
  transition:
    opacity .3s,
    overlay .3s allow-discrete,
    display .3s allow-discrete;
}
[popover]:popover-open { opacity: 1; }
@starting-style {
  [popover]:popover-open { opacity: 0; }
}

手元の Chromium 153 では、CSS.supports('overlay', 'auto') が true でした。MDN は2026年10月29日時点でこの機能を「Limited availability（一部のブラウザで動かない）」としているため、閉じるアニメーションが出ない環境でも、表示と非表示そのものは正しく動くように作っておきます。

overflow: overlay は auto として扱われた

もう1つは、スクロールバーを中身の上に重ねて出す overflow: overlay という以前の独自の値です。手元の Chromium では、style.overflow = 'overlay' と書くと指定の値は overlay のまま残りましたが、getComputedStyle() で読んだ実際の値は auto でした。新しく書くなら、最初から overflow: auto と、スクロールバーの幅を確保する scrollbar-gutter を使います。

最後の数値のとおり、showModal() で開いた dialog の z-index は auto のままでも、ページのどの要素より手前に出ました。最上位レイヤーは z-index の比べ合いの外にあるため、z-index を 9999 にするといった調整が要りません。

画像の合成モード「オーバーレイ」（mix-blend-mode: overlay）

この節では、画像編集ソフトや CSS の合成モード「オーバーレイ」が、色をどう計算しているかが実測の数値で分かります。

合成モードのオーバーレイは、下の色が暗ければ乗算、明るければスクリーンで重ねる計算です。MDN は「下の色が暗ければ multiply、明るければ screen の結果になる。hard-light の上下を入れ替えたもの」と説明しています。暗い所はより暗く、明るい所はより明るくなるため、コントラストが強まります。CSS では mix-blend-mode: overlay、Canvas では globalCompositeOperation = 'overlay' で使えます。

Canvas で灰色の下地（0〜255）に灰色を重ね、結果の値を読みました。

重ねる色が 128（中間の灰色）のときは、下の色がほぼそのまま残りました。写真に中間の灰色の質感を重ねても全体の明るさが崩れにくいのは、この性質のためです。

OverlayFSとは（下の層を変えずに書き込むファイルシステム）

この節では、Linux の OverlayFS が何をするものかと、書き込み・削除が実際にどこへ入るかが、手元の出力で分かります。

OverlayFS は、読み取り専用の「下の層（lowerdir）」に、書き込み用の「上の層（upperdir）」を重ねて、1つのディレクトリ（merged）に見せる Linux のファイルシステムです。Linux カーネルの公式ドキュメントによると、下の層は書き込めなくてもよく、作業用の workdir は upperdir と同じファイルシステムに置く必要があります。Docker のコンテナ、Live USB、組み込み機器の読み取り専用の領域などで使われています。

flowchart TB
    M[merged<br>利用者に見える場所]
    U[upperdir<br>書き込みはここだけ]
    L[lowerdir<br>読み取り専用]
    M --> U
    U --> L

作業場所に lower・upper・work・merged の4つのディレクトリを作り、下の層に a.txt・b.txt・dir/c.txt・40MB の big.bin を置いてから、自分専用のマウント名前空間の中でマウントしました。

unshare -m --propagation private bash   # ホストに見えないマウント名前空間に入る
mount -t overlay overlay \
  -o lowerdir=ofs/lower,upperdir=ofs/upper,workdir=ofs/work ofs/merged
findmnt -n ofs/merged

/srv/s4/r17/t185/ofs/merged overlay overlay rw,relatime,lowerdir=/srv/s4/r17/t185/ofs/lower,upperdir=/srv/s4/r17/t185/ofs/upper,workdir=/srv/s4/r17/t185/ofs/work,uuid=on

書き換え・削除・新規作成をしたときの上の層

merged の中で a.txt を書き換え、b.txt を消し、new.txt を作り、dir を消して作り直しました。

$ echo "上の層で書き換えた" > merged/a.txt
$ cat merged/a.txt
上の層で書き換えた
$ cat lower/a.txt
下の層の元の内容
$ rm merged/b.txt
$ ls -l upper
-rw-r--r-- 1 root root   28 Oct 31 08:47 a.txt
c--------- 2 root root 0, 0 Oct 31 08:47 b.txt

消したはずの b.txt は、上の層に「デバイス番号 0, 0 のキャラクタデバイス」として残りました。これが「ホワイトアウト」で、下の層の同じ名前のファイルを隠す目印です。公式ドキュメントも、削除は上の層に 0/0 のキャラクタデバイスとして記録されると説明しています。消して作り直した dir には、拡張属性が付きました。

dir   ['trusted.overlay.opaque'] [('trusted.overlay.opaque', b'y')]
b.txt [] []

trusted.overlay.opaque が y のディレクトリは「不透明」で、下の層の同じ名前のディレクトリの中身（c.txt）は見えなくなります。実際に merged/dir の中は d.txt だけでした。

下の層が変わらないことを確かめる

アンマウントしてから、最初に記録した下の層の SHA-256 と比べました。

$ cd lower && sha256sum -c ../lower.sha
a.txt: OK
b.txt: OK
dir/c.txt: OK
big.bin: OK

書き換え・削除・作り直しをしても、下の層の4つのファイルはハッシュ値まで同じでした。終わったあと、ホスト側で findmnt を見ても作業場所のマウントは1行も出ず、ホストのマウントは変わっていません。

コピーアップの時間（40MB のファイル）

下の層にあるファイルへ初めて書き込むと、ファイル全体が上の層へコピーされます（コピーアップ）。40MB の big.bin に1行足したときの時間を測りました。

1行の追記でも、上の層は 41MB になりました。大きなファイルを少しずつ書き換える処理（データベースのファイル・ログ）を OverlayFS の上で動かすと、最初の1回で丸ごとコピーが起き、容量も2倍使います。Docker でデータベースのファイルをボリュームに逃がすのは、このためです。手元の設定では metacopy が N（無効）で、アクセス時刻を変えただけでもファイル全体がコピーされました。公式ドキュメントによると、metacopy を有効にすると chown・chmod などはメタデータだけのコピーで済みます。

下の層を2つ重ねる・上の層なしで重ねる

lowerdir はコロンで区切って複数書けます。公式ドキュメントのとおり、左に書いた層が上になりました。upperdir を書かないと、読み取り専用になります。

$ mount -t overlay overlay -o lowerdir=ofs/lower2:ofs/lower ofs/m2
$ cat ofs/m2/a.txt
上の読み取り専用層の内容
$ touch ofs/m2/z
touch: cannot touch '/srv/s4/r17/t185/ofs/m2/z': Read-only file system

Dockerの overlay2 と overlay ネットワーク（名前が同じ別物）

この節では、Docker で出てくる2つの「overlay」の違いと、どちらの話かの見分け方が分かります。

Docker の overlay2 はイメージとコンテナの保存の仕組み（ストレージドライバ）、overlay ネットワークは複数のホストをまたぐ仮想ネットワークです。名前は似ていますが、扱う対象がまったく違います。

overlay2 とコンテナの層

Docker の公式ドキュメントは、イメージの層は「最後の層を除いて読み取り専用」で、コンテナを動かして加えた変更は「薄い書き込み用のコンテナの層」に書かれ、コンテナを消すとその層も消える、と説明しています。前の節の OverlayFS の実験に当てはめると、イメージが lowerdir、コンテナの層が upperdir です。コンテナの中でファイルを消しても、イメージの大きさが減らないのは、ホワイトアウトが上の層に増えるだけだからです。

overlay2 の公式ドキュメントでは、Docker では「OverlayFS」をカーネルのドライバ、「overlay2」を Docker のストレージドライバの名前として使い分けています。Linux カーネル 4.0 以上が必要で、xfs の上では d_type=true（xfs_info の ftype=1）が条件です。また、Docker Engine 29.0 以降を新しく入れた場合は、既定で containerd のイメージストアが使われ、そちらでは overlay2 ではなく overlayfs の「スナップショッター」が層を扱う、と書かれています。

# 使われているストレージドライバの確かめ方（Docker 公式ドキュメントの手順）
docker info --format '{{.Driver}}'
docker info | grep -E 'Storage Driver|Backing Filesystem'

層の重なりで容量が増える落とし穴は、関連記事「Dockerの落とし穴8選｜レイヤ・latest・PID 1」で扱っています。

overlay ネットワーク

公式ドキュメントによると、overlay ネットワークは「複数の Docker デーモンのホストの間に分散したネットワークを作る」もので、単体のコンテナをつなぐ場合も、ホストは Swarm に参加している必要があります。単体のコンテナもつなぐなら --attachable を付けます。

# Swarm に参加したホストで（公式ドキュメントの例）
docker network create -d overlay --attachable my-attachable-overlay

--opt encrypted を付けると VXLAN の層で IPsec の暗号化がかかりますが、公式ドキュメントは性能への影響が大きいので本番の前に試すよう注意しています。Docker のネットワークの種類（bridge・host・overlay など）の比較は、関連記事「Docker network/volume使い方｜種類比較表と実行ログで理解」にまとめています。

オーバーレイネットワークとは（VXLANで包んで運ぶ実測）

この節では、オーバーレイネットワークが「通信を通信で包む」仕組みであることが、実際のパケットで分かります。

オーバーレイネットワークは、物理のネットワーク（アンダーレイ）の上に、別の仮想のネットワークを重ねる仕組みです。仮想の網のパケットを、物理の網のパケットの中身として包んで運びます。Docker の overlay ネットワーク、Kubernetes のネットワークの一部、拠点間の VPN などで使われています。

2つの ip netns（t185a・t185b）を veth でつなぎ、物理の網に見立てて 10.185.0.0/24 を付けました。その上に VXLAN（ID 185・UDP 4789）で 192.168.185.0/24 の仮想の網を重ね、t185b の Web サーバーへ t185a から curl でつなぎました。

ip -n t185a link add vx0 type vxlan id 185 remote 10.185.0.2 local 10.185.0.1 dstport 4789 dev t185va
ip -n t185a addr add 192.168.185.1/24 dev vx0
ip -n t185a link set vx0 up
# t185b 側も同じように作り、192.168.185.2 を付ける
ip netns exec t185a curl -s -o /dev/null -w '%{http_code} %{remote_ip}\n' http://192.168.185.2:8185/

200 192.168.185.2

同じ通信を、仮想の網（vx0）と物理の網（veth）の両方で記録しました。

--- 仮想の網（vx0）で見た TCP の最初のパケット
IP 192.168.185.1.53530 > 192.168.185.2.8185: Flags [S], seq 3468648251, win 64860, options [mss 1410,...], length 0

--- 物理の網（veth）で見た同じパケット
ea:6c:a0:99:a1:f7 > 6e:2c:2a:90:bb:02, ethertype IPv4 (0x0800), length 124: 10.185.0.1.42429 > 10.185.0.2.4789: VXLAN, flags [I] (0x08), vni 185
02:84:35:c3:99:00 > ce:4d:ec:7a:c0:0c, ethertype IPv4 (0x0800), length 74: 192.168.185.1.53530 > 192.168.185.2.8185: Flags [S], ...

物理の網では、10.185.0.1 から 10.185.0.2 への UDP 4789 のパケットの中に、192.168.185.1 から 192.168.185.2 への TCP のパケットがそのまま入っていました。これが「重ねる」の正体です。

包む分だけ1回に運べる量が減るため、VXLAN の MTU は 1450 に下がり、TCP は MSS 1410 で始まりました。オーバーレイネットワークで「小さなリクエストは通るのに、大きな応答だけ止まる」ときは、この MTU の差を疑います。

配信・動画のオーバーレイ（OBSのテロップ・枠）

この節では、ゲーム実況やライブ配信でいう「オーバーレイ」が何で、どう作られているかが分かります。

配信のオーバーレイは、カメラやゲームの映像の上に、テロップ・枠・コメント・通知などを重ねて表示するものです。OBS Studio では「ブラウザソース」で Web ページを映像に重ねる方法がよく使われます。OBS の公式 Knowledge Base は、ブラウザソースを「OBS に直接追加できる Web ブラウザ」と説明し、既定のカスタム CSS で背景が透明になる、幅と高さの既定は 800×600、手元のファイルも読み込める、としています。

背景を透明にしたテロップのページを作り、Chromium で背景を抜いたスクリーンショットを撮って、画素の値を読みました。

html, body { background: rgba(0, 0, 0, 0); margin: 0; }
.lower-third {
  position: absolute; left: 40px; bottom: 40px;
  background: rgba(20, 40, 120, .85); color: #fff;
  padding: 12px 20px; font: 24px sans-serif;
}

背景が透明なら、テロップ以外の部分から下の映像がそのまま見えます。配信のオーバーレイも、Web のオーバーレイと同じく「下を残して上に重ねる」仕組みです。

オーバーレイでよくあるエラー・つまずき

この節では、オーバーレイを作ったり使ったりするときに出るエラーと症状を、原文つきで原因と直し方まで確かめられます。

mount のエラーはどれも似た文言で、原因は dmesg に出ました。OverlayFS のマウントに失敗したら、まず dmesg | tail を見ます。もう1つ、公式ドキュメントは、マウント中に下の層や上の層を直接書き換えると「オーバーレイの動作は未定義」になると書いています。変えたいときは merged の側から書くか、アンマウントしてから変えます。

どのオーバーレイかを見分ける判断表

この節では、文書や会話に出てきた「オーバーレイ」がどの意味かを、手がかりの言葉から判断できます。

Kubernetes の Kustomize でいう overlay も「共通の設定の上に、環境ごとの差分を重ねる」という同じ考え方です。書き方は関連記事「Kustomizeの使い方｜base・overlay・patchの書き方」で扱っています。

1. 1飾りとして重ねるだけ → 部分的なオーバーレイか pointer-events: none画像の説明文・グラデーションの幕
2. 2後ろを使いながら補足を出す → popover外側のクリックと Esc で閉じる
3. 3答えるまで後ろを止める → dialog の showModal()後ろのスクロールは別に止める
4. 4元のファイルを変えずに試す → OverlayFS大きなファイルの書き換えはコピーアップに注意
5. 5別々のホストのコンテナを同じ網に → overlay ネットワークMTU と必要なポートを先に確かめる

よくある質問

Q. オーバーレイとは簡単に言うと何ですか？ A. 下にあるものを残したまま、その上に別のものを重ねることです。画面の上に重ねる表示、下の層を変えずに書き込めるファイルシステム、物理の網の上に作る仮想の網など、IT の分野によって重ねる対象が変わります。

Q. オーバーレイ表示とは何ですか？ A. 今のページや映像の上に、別の表示を重ねて出すことです。Web では position: fixed と inset: 0 で全面を覆う幕を作り、その上に小窓を置く形がよく使われます。下のページは消えずに残っています。

Q. オーバーレイとモーダルの違いは何ですか？ A. オーバーレイは「重ねる見た目」、モーダルは「閉じるまで後ろを操作させない仕組み」です。実測では、幕を重ねただけではクリックしか止まらず、Tab キーで後ろのボタンへ移れました。モーダルにするなら dialog の showModal() か inert を使います。

Q. オーバーレイとポップアップの違いは何ですか？ A. ポップアップは「飛び出して出る小窓」という出方を指す言葉で、オーバーレイは「上に重ねる」という重なり方を指す言葉です。Web の popover は後ろを止めない重ね表示で、外側をクリックすると閉じ、そのクリックは後ろのボタンへ届きました。

Q. CSS の overlay プロパティで重ね表示を作れますか？ A. 作れません。overlay は、popover やモーダルの dialog が最上位レイヤーに描かれているかを表す値で、ブラウザだけが設定します。transition に overlay と allow-discrete を入れ、閉じるアニメーションを最後まで見せるために使います。

Q. OverlayFS で下の層は本当に変わりませんか？ A. merged の側から書き換え・削除・作り直しをした実験では、下の層の4つのファイルの SHA-256 はすべて一致しました。ただし、マウント中に下の層を直接書き換えると動作が未定義になる、と公式ドキュメントに書かれています。

Q. OverlayFS でファイルを消すと、どこに記録されますか？ A. 上の層に、デバイス番号 0, 0 のキャラクタデバイス（ホワイトアウト）として残ります。手元でも b.txt を消すと、upper に c--------- 0, 0 b.txt ができました。消して作り直したディレクトリには trusted.overlay.opaque＝y が付きました。

Q. Docker の overlay2 と overlay ネットワークは関係がありますか？ A. 名前は似ていますが別物です。overlay2 はイメージとコンテナの層を OverlayFS で重ねる保存の仕組み、overlay ネットワークは Swarm に参加した複数のホストをまたぐ仮想ネットワークです。

Q. オーバーレイネットワークとは何ですか？ A. 物理のネットワークの上に別の仮想ネットワークを重ねる仕組みです。手元の VXLAN では、仮想の網の TCP のパケットが、物理の網の UDP 4789 のパケットの中にそのまま入っていて、包む分だけ 50 バイト大きくなりました。

Q. 配信のオーバーレイはどう作りますか？ A. 背景を透明にした画像や Web ページを、映像の上に重ねます。OBS Studio のブラウザソースは既定の CSS で背景が透明になります。手元の透明なページでは、何もない部分の画素の透明度が 0 で、下の映像がそのまま見える状態でした。

Q. 合成モードのオーバーレイは、どんな効果ですか？ A. 下の色が暗ければ乗算、明るければスクリーンで重ねるため、コントラストが強くなります。Canvas の実測では、下が 64 に 200 を重ねると 100、下が 192 に 60 を重ねると 159 になり、計算式どおりの値でした。

まとめ

• オーバーレイとは、下にあるものを残したまま上に別のものを重ねること。画面・ファイル・ネットワーク・映像・画像の合成など、場面で重ねる対象が変わる。
• Web のオーバーレイは position: fixed と inset: 0 で作る。幕を重ねただけではクリックしか止まらず、Tab キーとスクロールは後ろへ届いた。後ろを止めるなら dialog の showModal() か inert を使い、スクロールは overflow: hidden で別に止める。
• CSS の overlay プロパティは重ね表示を作るものではなく、閉じるアニメーション用。overflow: overlay は手元の Chromium で auto として扱われた。
• OverlayFS は読み取り専用の下の層に書き込み用の上の層を重ねる。書き換え・削除をしても下の層のハッシュ値は変わらず、削除は 0, 0 のキャラクタデバイスとして上の層に残った。40MB のファイルは1行の追記で丸ごとコピーされた。
• Docker の overlay2（保存の仕組み）と overlay ネットワーク（複数ホストの仮想の網）は別物。オーバーレイネットワークは通信を通信で包むため、MTU が小さくなる点に注意する。

参考・出典

確認日はいずれも 2026年10月29日です。

• Linux カーネル公式ドキュメント「Overlay Filesystem」：https://docs.kernel.org/filesystems/overlayfs.html
• Docker Docs「Storage drivers」：https://docs.docker.com/engine/storage/drivers/
• Docker Docs「OverlayFS storage driver」：https://docs.docker.com/engine/storage/drivers/overlayfs-driver/
• Docker Docs「Overlay network driver」：https://docs.docker.com/engine/network/drivers/overlay/
• MDN「overlay」：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overlay
• MDN「<blend-mode>」：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/blend-mode
• MDN「inert」：https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert
• W3C WAI-ARIA Authoring Practices Guide「Dialog (Modal) Pattern」：https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
• OBS Studio Knowledge Base「Browser Source」：https://obsproject.com/kb/browser-source
• IT用語辞典 e-Words「オーバーレイ」：https://e-words.jp/w/%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%A4.html
• Weblio辞書「オーバーレイ」（デジタル大辞泉ほか）：https://www.weblio.jp/content/%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%A4
• 土木用語集「オーバーレイ」：https://doboku.ezwords.net/yougo/%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%A4.html
• SMBC日興証券 用語集「オーバーレイ」：https://www.smbcnikko.co.jp/terms/japan/o/J0128.html

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。