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
9.1k
親に向かってなんだそのz-indexは
z-indexなんぞやを覚えてしまった不良息子をどう更生させるか、その感動秘話。
→ stack context に閉じ込めたり、portalで追い出せばいいと思う。
sadnessOjisan
September 18, 2018
Tweet
Share
More Decks by sadnessOjisan
See All by sadnessOjisan
AIエージェントが動かないときの原因とその対処
sadnessojisan
2
17
React のルーター事情
sadnessojisan
1
430
PHPこそ OpenTelemetry が嬉しい
sadnessojisan
2
330
TypeScript、上達の瞬間
sadnessojisan
51
18k
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
790
疎通2024
sadnessojisan
5
1.6k
BasicBasic認証
sadnessojisan
5
4.5k
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
20
5.9k
サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024
sadnessojisan
36
15k
Other Decks in Technology
See All in Technology
エラーとアクセシビリティ
schktjm
1
1.2k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
280
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
220
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.8k
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
230
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
430
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
230
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
190
Obsidian応用活用術
onikun94
1
450
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
120
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Speed Design
sergeychernyshev
32
1.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Thoughts on Productivity
jonyablonski
70
4.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Scaling GitHub
holman
463
140k
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