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

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

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

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

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

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

つくったもの 7

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

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

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

z-index + position = 怪奇現象 11

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

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

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

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

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

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

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

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

おしまい 21

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

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

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

Stack Context 26

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

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

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

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

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

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

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

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

opacityを設定する 35

position: relativeを設定する 37

疑似コード 38

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

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

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

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

More Decks by sadnessOjisan

Other Decks in Technology

Featured

Transcript