トースト通知のz-index
モーダルやポップオーバーを含む他のすべてのUI要素の上に常に表示されるようにトースト通知のz-indexレイヤーを設計します。
Common Patterns
詳細な説明
トースト通知のz-index戦略
トースト通知（スナックバーやアラートとも呼ばれる）は、ほぼすべての他のUI要素の上に表示される必要があります。z-index階層ではツールチップにのみ譲ります。
推奨z-index位置
:root {
--z-dropdown: 1000;
--z-sticky: 1020;
--z-overlay: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-toast: 1080; /* モーダルの上 */
--z-tooltip: 1090; /* トーストの上 */
}
実装
.toast-container {
position: fixed;
z-index: var(--z-toast);
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
pointer-events: none; /* 空のスペースをクリックスルー可能に */
}
.toast {
pointer-events: auto; /* トースト自体のクリックを再有効化 */
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 360px;
}
なぜトーストに高いz-indexが必要か
- モーダルの上：モーダルが開いている間もユーザーは成功/エラーフィードバックを見る必要があります。
- オーバーレイの上：ローディングオーバーレイがページをカバーしていても、トーストは表示される必要があります。
- スティッキーヘッダーの上：トーストはナビゲーションヘッダーの後ろに隠れてはいけません。
重要な考慮事項
- コンテナに
pointer-events: none、個々のトーストにpointer-events: autoを使用 - スタッキングコンテキストの罠を避けるため、トーストコンテナを
<body>の直接の子として配置 - モーダルが開いている状態、スティッキーヘッダーが表示されている状態、複数のトーストがスタックされた状態でテスト
ユースケース
現在表示されている他のUI要素（モーダル、ドロップダウン、オーバーレイ）に関係なく表示され続ける必要があるトースト通知システムを実装する場合。