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
300
PHPこそ OpenTelemetry が嬉しい
sadnessojisan
2
280
TypeScript、上達の瞬間
sadnessojisan
51
18k
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
700
疎通2024
sadnessojisan
5
1.6k
BasicBasic認証
sadnessojisan
5
4.3k
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
20
5.7k
サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024
sadnessojisan
36
15k
Node.js v12 を使い続けていたのはなぁぜなぁぜ?
sadnessojisan
11
28k
Other Decks in Technology
See All in Technology
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
130
ObsidianをMCP連携させてみる
ttnyt8701
2
100
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
2.7k
Nonaka Sensei
kawaguti
PRO
3
620
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
160
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
260
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
200
AIコーディング新時代を生き残るための試行錯誤 / AI Coding Survival Guide
tomohisa
9
12k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.6k
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
2
140
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
110
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
630
The Cult of Friendly URLs
andyhume
79
6.4k
Making Projects Easy
brettharned
116
6.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
The Invisible Side of Design
smashingmag
299
51k
Side Projects
sachag
454
42k
Scaling GitHub
holman
459
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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