こんな感じに決める。
| レイヤー | z-index | 用途 |
|---|---|---|
| 通常コンテンツ | auto / 0 | 普通の画面 |
| 浮遊要素 | 10 | sticky、固定ヘッダー等 |
| ドロップダウン | 100 | セレクト、メニュー |
| ポップオーバー | 200 | Tooltip、Popover |
| モーダル | 300 | Dialog |
| モーダル内の最上位 | 400 | Dialogの操作系 |
| 通知 | 500 | Toast等 |
CSS変数にまとめる
|
1 2 3 4 5 6 7 8 |
:root { --z-base: 0; --z-sticky: 10; --z-dropdown: 100; --z-popover: 200; --z-modal: 300; --z-toast: 400; } |
staking context
z-indexを外部に切り出す機能。具体的に以下のcss指定があると対象になる。
position: relative/absolute＋z-indexがauto以外position: fixedposition: stickyopacity: 1未満transformがnone以外filterがnone以外isolation: isolate（汎用のモーダル系コンポーネント作るならかなり相性良い）will-changeで上記の対象を指定-
mix-blend-modeがnormal以外
この記事へのコメントはありません。