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

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

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

33ef4c1ebe619115b552db9a9f9a3509?s=128

sadnessOjisan

September 18, 2018
Tweet

Transcript

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

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

    • NextJS • GatsbyJS Airメイト (PC / iPad / Mobile ) 2
  3. 3

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

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

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

  7. つくったもの 7

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

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

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

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

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

  13. 13

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

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

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

  17. <table />&<div />「親に向かってなんだそのz-indexは!」 17

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

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

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

  21. おしまい 21

  22. 22

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

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

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

  26. Stack Context 26

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

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

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

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

  31. 注:どんな要素も<html />要素が作る、 ルートコンテキストに所属する 31

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

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

  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
  35. opacityを設定する 35

  36. 36

  37. position: relativeを設定する 37

  38. 疑似コード 38

  39. 39

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

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