Slide 1
Slide 1 text
親に向かってなんだその
z-indexは!!
Yuta Ide(@oijsan)
1
Slide 2
Slide 2 text
Yuta Ide(@ojisan)
株式会社リクルートライフスタイル
新卒2年⽬
• React
• Redux & redux-saga
• NextJS
• GatsbyJS
Airメイト (PC / iPad / Mobile )
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿
＞ JSのイベントなのに, CSSのお話 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
4
Slide 5
Slide 5 text
今⽇、話すこと
• 要素の重なり順の扱い⽅
• z-indexにまつわる怪奇現象
5
Slide 6
Slide 6 text
プランナー「管理テーブル作ってほしいな」
6
Slide 7
Slide 7 text
つくったもの 7
Slide 8
Slide 8 text
つくったもの
枠内スクロール
スクロール固定（position: sticky)
モーダルの開閉
ツールチップ
z-indexを⾼く設定（スク
ロールの⼀番⼿前に来る）
8
Slide 9
Slide 9 text
つくったもの
モーダルを閉じるボタン
モーダルを閉じようとすると確認ダイアログ
9
Slide 10
Slide 10 text
案件前のお気持ち
(絶対やばい…絶対やばい…絶対崩れる…)
(要素の上に要素を重ねすぎだろ、、、
別ページに分けてくれよ・・・)
10
Slide 11
Slide 11 text
z-index + position = 怪奇現象
11
Slide 12
Slide 12 text
怪奇現象
モーダルを突破して来る謎のやつ
12
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
なんで、こんなことが起きたか
14
Slide 15
Slide 15 text
スクロール固定（position: sticky)
z-indexを⾼く設定（スクロールの⼀番⼿前に来る）
疑似コード
15
Slide 16
Slide 16 text
⼀番⼿前にくるのが、
z-index持ちのTable header
16
Slide 17
Slide 17 text
＆「親に向かってなんだそのz-indexは！」
17
Slide 18
Slide 18 text
Solution
• modalをopen時に、
z-index=0
• modalをopen時に、
stickyを解除
• modalに⾼いz-indexを設定
18
Slide 19
Slide 19 text
Solution
• modalをopen時に、
z-index=0
• modalをopen時に、
stickyを解除
• modalに⾼いz-indexを設定
19
Slide 20
Slide 20 text
⼦供より親が強くなって解決！！！
20
Slide 21
Slide 21 text
おしまい
21
Slide 22
Slide 22 text
22
Slide 23
Slide 23 text
⼤きいz-indexを使うのは、
親の⽴場として⼤⼈げ無い！
23
Slide 24
Slide 24 text
z-indexの管理をそもそも
したくない！！
24
Slide 25
Slide 25 text
それ、CSSの標準機能でできます
25
Slide 26
Slide 26 text
Stack Context
26
Slide 27
Slide 27 text
そもそもz-indexの数値の意味は？
27
Slide 28
Slide 28 text
z-indexの数値の意味
要素の重なり順
28
Slide 29
Slide 29 text
z-indexの数値の意味
同じstack context内での要素の重なり順
29
Slide 30
Slide 30 text
Stack context
z-indexの効果の影響範囲
30
Slide 31
Slide 31 text
注：どんな要素も
Slide 32
Slide 32 text
header要素とモーダルは同じルートコンテキストに
所属している => z-indexの⾼い⽅が前にくる
疑似コード
32
Slide 33
Slide 33 text
突破していしる要素を、
新しいコンテキストで包み、
z-indexの数値が外に漏れないようにする
33
Slide 34
Slide 34 text
コンテキストの作り⽅
https://developer.mozilla.org/ja/docs/Web/Guide/CS
S/Understanding_z_index/The_stacking_context
• position: absolute or relative と z-indexを当てる
• position: sticky or fixedを当てる
• opacity を1以下にする
34
Slide 35
Slide 35 text
opacityを設定する
35
Slide 36
Slide 36 text
36
Slide 37
Slide 37 text
position: relativeを設定する
37
Slide 38
Slide 38 text
疑似コード
38
Slide 39
Slide 39 text
39
Slide 40
Slide 40 text
Stack contextを上⼿に使えば、
⼦がどんなz-indexを持っていても、
スタイルの崩れを防げる
40
Slide 41
Slide 41 text
⼦供がz-indexを使って、⾔うことを聞かないなら、
Stack contextに閉じ込めてやりましょう。
教訓
今⽇のコード: https://github.com/sadnessOjisan/DialogOnModalOnTooltipOnTable
41