モーダル画面を作る時の
z-index の罠

要素が透けて見える…？

画面全体を覆う黒い背景と、その上に浮かぶ白いカード（モーダル）。これを実装した時、なぜか背後のボタンがカードを突き抜けて表示されるという怪奇現象が起きました。これが z-index（レイヤー順序） の洗礼でした。

レイヤーを数字で制御する

Webページは平面ですが、実は「奥行き（Z軸）」という概念があります。数字が大きいほど、手前に表示されるという単純なルールです。

<!-- 半透明の背景（オーバーレイ） -->
<div class="fixed inset-0 bg-black/40 z-40"></div>

<!-- モーダル本体 -->
<div class="fixed z-50 bg-white p-8">
  保存方法はこちら
</div>

Tailwind では z-40 z-50 などのクラスで管理します。インフラのネットワーク階層（OSI参照モデル）のように、しっかりレイヤーを意識して配置してあげないと、UIがバラバラになってしまう。目に見えない順序の大切さを学びました。