CSS: z-indexの問題はisolationプロパティで解決できる(翻訳)
(大仰なタイトルについてはあらかじめお詫び申し上げます...😉)
z-index
プロパティは、要素の(z軸、つまりユーザーから見て前後方向の)積み重ね順を制御し、表示されるレイアウトでどの要素が他の要素の上(手前)に表示されるかを決定します。z-index
を使うことで、(文字通りの)奥行きのあるUIや画面デザインを作れるようになります。
しかし長い間Webアプリやサイトを作っていると、たちまち例のz-index
問題を踏んでしまいます。私はこの問題と戦うために、長年多くの手法を研究して使ってきました。それこそSCSS時代のz-indexマップから、z-index: 99999
を追加するという投げやりな方法まで、いろいろ試してきました。(╯°□°)╯︵ ┻━┻
よくある例を見てみましょう。
<nav class="sticky top-0 z-10">
Sticky Nav (z-index: 10)
</nav>
<div class="">
<div class="relative z-20">
Z-index content (z-index: 20)
</div>
</div>
これを上下にスクロールすると、"Z-index content"がnav
要素の「上に」覆いかぶさってしまいます。以下のプレビューをスクロールしてみてください。
See the Pen
z-index before fix by hachi8833 (@hachi8833)
on CodePen.
こういうことが起きると、nav
のz-indexを30
に変更して終わりにしたくなるかもしれません。しかし現代の私たちは、そうすると良い結果にならないことも知っています。😉
現代的な(かつずっと健全な)方法は、以下のようにisolation
プロパティを使うことです。
<nav class="sticky top-0 z-10">
Sticky Nav (z-index: 10)
</nav>
<div class="isolate">
<div class="relative z-20">
Z-index content (z-index: 20)
</div>
</div>
なお、このサンプルではTailwind CSSのisolate
を使っていますが、これは通常のCSSのisolation: isolate;
と同じであることを知っておけば十分です。
See the Pen
z-index before fix by hachi8833 (@hachi8833)
on CodePen.
isolation: isolate;
の使い方を学べば、アプリでたくさんのユースケースが目に付くようになります。
開発者向けのUIデザインのコツについて詳しくは以下の記事をどうぞ。
参考: UI Design Tips Using Tailwind CSS for Developers | Rails Designer
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。
参考: 重ね合わせコンテキスト(stacking context) - CSS: カスケーディングスタイルシート | MDN
参考:
z-index
- CSS: カスケーディングスタイルシート | MDN