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

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デザインのコツについて詳しくは以下の記事をどうぞ。

Tailwind CSS: 開発者が知っておきたいデリケートなUIデザインの便利技11種（翻訳）

関連記事

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

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