親に向かってなんだそのz-indexは

z-indexなんぞやを覚えてしまった不良息子をどう更生させるか、その感動秘話。
→ stack context に閉じ込めたり、portalで追い出せばいいと思う。

Transcript

1. 親に向かってなんだその
   z-indexは!!
   Yuta Ide(@oijsan)
   1
   

   View Slide

2. Yuta Ide(@ojisan)
   株式会社リクルートライフスタイル
   新卒2年⽬
   • React
   • Redux & redux-saga
   • NextJS
   • GatsbyJS
   Airメイト (PC / iPad / Mobile )
   2
   

   View Slide

3. View Slide

4. ＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿
   ＞ JSのイベントなのに, CSSのお話 ＜
   ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
   4
   

   View Slide

5. 今⽇、話すこと
   • 要素の重なり順の扱い⽅
   • z-indexにまつわる怪奇現象
   5
   

   View Slide

6. プランナー「管理テーブル作ってほしいな」
   6
   

   View Slide

7. つくったもの 7
   

   View Slide

8. つくったもの
   枠内スクロール
   スクロール固定（position: sticky)
   モーダルの開閉
   ツールチップ
   z-indexを⾼く設定（スク
   ロールの⼀番⼿前に来る）
   8
   

   View Slide

9. つくったもの
   モーダルを閉じるボタン
   モーダルを閉じようとすると確認ダイアログ
   9
   

   View Slide

10. 案件前のお気持ち
    (絶対やばい…絶対やばい…絶対崩れる…)
    (要素の上に要素を重ねすぎだろ、、、
    別ページに分けてくれよ・・・)
    10
    

    View Slide

11. z-index + position = 怪奇現象
    11
    

    View Slide

12. 怪奇現象
    モーダルを突破して来る謎のやつ
    12
    

    View Slide

13. View Slide

14. なんで、こんなことが起きたか
    14
    

    View Slide

15. スクロール固定（position: sticky)
    z-indexを⾼く設定（スクロールの⼀番⼿前に来る）
    疑似コード
    15
    

    View Slide

16. ⼀番⼿前にくるのが、
    z-index持ちのTable header
    16
    

    View Slide

17. ＆「親に向かってなんだそのz-indexは！」
    17
    

    View Slide

18. Solution
    • modalをopen時に、
    z-index=0
    • modalをopen時に、
    stickyを解除
    • modalに⾼いz-indexを設定
    18
    

    View Slide

19. Solution
    • modalをopen時に、
    z-index=0
    • modalをopen時に、
    stickyを解除
    • modalに⾼いz-indexを設定
    19
    

    View Slide

20. ⼦供より親が強くなって解決！！！
    20
    

    View Slide

21. おしまい
    21
    

    View Slide

22. View Slide

23. ⼤きいz-indexを使うのは、
    親の⽴場として⼤⼈げ無い！
    23
    

    View Slide

24. z-indexの管理をそもそも
    したくない！！
    24
    

    View Slide

25. それ、CSSの標準機能でできます
    25
    

    View Slide

26. Stack Context
    26
    

    View Slide

27. そもそもz-indexの数値の意味は？
    27
    

    View Slide

28. z-indexの数値の意味
    要素の重なり順
    28
    

    View Slide

29. z-indexの数値の意味
    同じstack context内での要素の重なり順
    29
    

    View Slide

30. Stack context
    z-indexの効果の影響範囲
    30
    

    View Slide

31. 注：どんな要素も

    View Slide

32. header要素とモーダルは同じルートコンテキストに
    所属している => z-indexの⾼い⽅が前にくる
    疑似コード
    32
    

    View Slide

33. 突破していしる要素を、
    新しいコンテキストで包み、
    z-indexの数値が外に漏れないようにする
    33
    

    View Slide

34. コンテキストの作り⽅
    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
    

    View Slide

35. opacityを設定する
    35
    

    View Slide

36. View Slide

37. position: relativeを設定する
    37
    

    View Slide

38. 疑似コード
    38
    

    View Slide

39. View Slide

40. Stack contextを上⼿に使えば、
    ⼦がどんなz-indexを持っていても、
    スタイルの崩れを防げる
    40
    

    View Slide

41. ⼦供がz-indexを使って、⾔うことを聞かないなら、
    Stack contextに閉じ込めてやりましょう。
    教訓
    今⽇のコード: https://github.com/sadnessOjisan/DialogOnModalOnTooltipOnTable
    41
    

    View Slide