Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails以外の開発一般

CSS: z-indexの問題はisolationプロパティで解決できる(翻訳)

概要

元サイトの許諾を得て翻訳・公開いたします。

日本語タイトルは内容に即したものにしました。

参考: 重ね合わせコンテキスト(stacking context) - CSS: カスケーディングスタイルシート | MDN
参考: z-index - CSS: カスケーディングスタイルシート | MDN

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

関連記事

Railsフロントエンド: HotwireとTailwind CSSでモーダルを作る(翻訳)

待望のCSSコンテナクエリがやってきた(翻訳)


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。