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
8.6k
親に向かってなんだそのz-indexは
z-indexなんぞやを覚えてしまった不良息子をどう更生させるか、その感動秘話。
→ stack context に閉じ込めたり、portalで追い出せばいいと思う。
sadnessOjisan
September 18, 2018
Tweet
Share
More Decks by sadnessOjisan
See All by sadnessOjisan
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
18
3.3k
サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024
sadnessojisan
31
12k
Node.js v12 を使い続けていたのはなぁぜなぁぜ?
sadnessojisan
11
4.7k
かにさんタワーバトル
sadnessojisan
1
1.8k
現実世界におけるスキーマ設計の妥協
sadnessojisan
19
7.7k
my new error
sadnessojisan
0
120
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
5
4.2k
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
sadnessojisan
2
1.8k
SSG is a compiler
sadnessojisan
8
7.7k
Other Decks in Technology
See All in Technology
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
270
【基本】データベース設計
oracle4engineer
PRO
2
310
認知症フレンドリーテックとスタックチャン
naokiuc
0
400
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
390
高専で制御を、大学でセンシングを学び、次は脳みそ
satoshirobatofujimoto
0
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
460
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
790
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
390
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
190
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
The Invisible Customer
myddelton
114
12k
Happy Clients
brianwarren
92
6.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Git: the NoSQL Database
bkeepers
PRO
423
63k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
A Tale of Four Properties
chriscoyier
153
22k
Product Roadmaps are Hard
iamctodd
45
9.8k
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