Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
親に向かってなんだそのz-indexは
sadnessOjisan
September 18, 2018
Technology
12
7.8k
親に向かってなんだそのz-indexは
z-indexなんぞやを覚えてしまった不良息子をどう更生させるか、その感動秘話。
→ stack context に閉じ込めたり、portalで追い出せばいいと思う。
sadnessOjisan
September 18, 2018
Tweet
Share
More Decks by sadnessOjisan
See All by sadnessOjisan
div 上にコメントを流す技術
sadnessojisan
0
78
Rust でパーソナルカラーを診断できる CLI を作った
sadnessojisan
0
45
サーバーアーキテクチャと非同期ランタイムいろいろ
sadnessojisan
0
400
SSG is a compiler
sadnessojisan
6
4.1k
不用品掲示サイトをMicroCMS + NextJS + vanilla-extract で作った話
sadnessojisan
3
710
preactの仕組みを理解する軽量版教育用preactを作ってる話
sadnessojisan
4
2.3k
Node.jsの非同期とI/Oについて調べてみた
sadnessojisan
2
650
TypeScriptのDIはどうすればいいの?
sadnessojisan
10
2.3k
簡単には届かなかったweb push/web-push-is-difficult#pwanight
sadnessojisan
2
290
Other Decks in Technology
See All in Technology
技術広報の役割を定義してみた 2022年春
afroscript
3
2.4k
一人から始めるプロダクトSRE / How to start SRE in a product team, all by yourself
vtryo
4
2.6k
OSS ことはじめ
hsbt
3
560
新規ゲームのリリース(開発)前からのSRE活動
tmkoikee
1
270
ニフティでSRE推進活動を始めて取り組んできたこと
niftycorp
2
430
アルプの 認証/認可分離戦略と手法
ma2k8
PRO
2
310
Steps toward self-service operations in eureka
fukubaka0825
0
650
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
ishikawa_pro
0
100
LINEスタンプの実例紹介 小さく始める障害検知・対応・振り返りの 改善プラクティス
line_developers
PRO
3
1.6k
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
SRENEXT2022 組織にSREを実装していくまでの道のり
marnie0301
1
450
事業の成長と共に歩む、ABEMA SRE探求の歴史 / SRE-Next 2022
nagaa052
0
210
Featured
See All Featured
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Scaling GitHub
holman
451
140k
Gamification - CAS2011
davidbonilla
75
3.9k
Happy Clients
brianwarren
89
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
A designer walks into a library…
pauljervisheath
196
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
910
Mobile First: as difficult as doing things right
swwweet
212
7.5k
Become a Pro
speakerdeck
PRO
3
780
Transcript
親に向かってなんだその z-indexは!! Yuta Ide(@oijsan) 1
Yuta Ide(@ojisan) 株式会社リクルートライフスタイル 新卒2年⽬ • React • Redux & redux-saga
• NextJS • GatsbyJS Airメイト (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 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
22
⼤きい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
36
position: relativeを設定する 37
疑似コード 38
39
Stack contextを上⼿に使えば、 ⼦がどんなz-indexを持っていても、 スタイルの崩れを防げる 40
⼦供がz-indexを使って、⾔うことを聞かないなら、 Stack contextに閉じ込めてやりましょう。 教訓 今⽇のコード: https://github.com/sadnessOjisan/DialogOnModalOnTooltipOnTable 41