Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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