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 full-size slide

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

    View full-size slide

  3. _⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_
    > JSのイベントなのに, CSSのお話 <
     ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ ̄
    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. つくったもの 7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. &「親に向かってなんだそのz-indexは!」
    17

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. おしまい
    21

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Stack Context
    26

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 注:どんな要素も

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. コンテキストの作り⽅
    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 full-size slide

  32. opacityを設定する
    35

    View full-size slide

  33. position: relativeを設定する
    37

    View full-size slide

  34. 疑似コード
    38

    View full-size slide

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

    View full-size slide

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

    View full-size slide