z-indexなんぞやを覚えてしまった不良息子をどう更生させるか、その感動秘話。 → stack context に閉じ込めたり、portalで追い出せばいいと思う。
親に向かってなんだそのz-indexは!!Yuta Ide(@oijsan)1
View Slide
Yuta Ide(@ojisan)株式会社リクルートライフスタイル新卒2年⽬• React• Redux & redux-saga• NextJS• GatsbyJSAirメイト (PC / iPad / Mobile )2
3
_⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_> 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
13
なんで、こんなことが起きたか14
スクロール固定(position: sticky)z-indexを⾼く設定(スクロールの⼀番⼿前に来る)疑似コード15
⼀番⼿前にくるのが、z-index持ちのTable header16
&「親に向かってなんだその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
22
⼤きいz-indexを使うのは、親の⽴場として⼤⼈げ無い!23
z-indexの管理をそもそもしたくない!!24
それ、CSSの標準機能でできます25
Stack Context26
そもそもz-indexの数値の意味は?27
z-indexの数値の意味要素の重なり順28
z-indexの数値の意味同じstack context内での要素の重なり順29
Stack contextz-indexの効果の影響範囲30
注:どんな要素も
header要素とモーダルは同じルートコンテキストに所属している => z-indexの⾼い⽅が前にくる疑似コード32
突破していしる要素を、新しいコンテキストで包み、z-indexの数値が外に漏れないようにする33
コンテキストの作り⽅https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context• position: absolute or relative と z-indexを当てる• position: sticky or fixedを当てる• opacity を1以下にする34
opacityを設定する35
36
position: relativeを設定する37
疑似コード38
39
Stack contextを上⼿に使えば、⼦がどんなz-indexを持っていても、スタイルの崩れを防げる40
⼦供がz-indexを使って、⾔うことを聞かないなら、Stack contextに閉じ込めてやりましょう。教訓今⽇のコード: https://github.com/sadnessOjisan/DialogOnModalOnTooltipOnTable41