Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
親に向かってなんだそのz-indexは
Search
sadnessOjisan
September 18, 2018
Technology
12
9k
親に向かってなんだそのz-indexは
z-indexなんぞやを覚えてしまった不良息子をどう更生させるか、その感動秘話。
→ stack context に閉じ込めたり、portalで追い出せばいいと思う。
sadnessOjisan
September 18, 2018
Tweet
Share
More Decks by sadnessOjisan
See All by sadnessOjisan
React のルーター事情
sadnessojisan
1
110
PHPこそ OpenTelemetry が嬉しい
sadnessojisan
2
250
TypeScript、上達の瞬間
sadnessojisan
51
17k
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
620
疎通2024
sadnessojisan
5
1.5k
BasicBasic認証
sadnessojisan
5
4.2k
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
20
5.5k
サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024
sadnessojisan
36
14k
Node.js v12 を使い続けていたのはなぁぜなぁぜ?
sadnessojisan
11
27k
Other Decks in Technology
See All in Technology
Symfony in 2025: Scaling to 0
fabpot
2
200
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
OCI見積もり入門セミナー
oracle4engineer
PRO
0
120
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.9k
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
150
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
570
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
160
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
460
問題解決に役立つ数理工学
recruitengineers
PRO
7
2.2k
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
6
730
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.6k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Building Applications with DynamoDB
mza
94
6.3k
KATA
mclloyd
29
14k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Unsuck your backbone
ammeep
670
57k
BBQ
matthewcrist
88
9.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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