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

1.

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

2.

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

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

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

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

Want more?

Transcript