Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sadnessOjisan
September 18, 2018

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

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

sadnessOjisan

September 18, 2018
Tweet

More Decks by sadnessOjisan

Other Decks in Technology

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. 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. 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. 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. 36

    View Slide

  37. position: relativeを設定する
    37

    View Slide

  38. 疑似コード
    38

    View Slide

  39. 39

    View Slide

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

    View Slide

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

    View Slide