z-index 同士の競合を isolation: isolate; で解消する本稿は、 ZOZOTOWN 開発本部のフロントエンドエンジニア有志で開催されている、スタイル分科会にて挙がったテーマを記事にしたものです。 この記事で分かること isolation: isolate; がどのような場面で有用かを解説します。 複数のコンポーネントを配置したとき、それぞれの z-index が競合したケースを例に用います。 前提 それぞれ position: absolute; の要素を内包する、 2 つのコンポーネントを横並びで配置します。 デモ メニューに hover してみてください。デフォルトでは、表示される子メニューが他のコンポーネントの z-index に負け、表示が崩れてしまいます。 「z-index の競合を解決する」ボタンを押下すると、子メニューが正しく表示されるようになります。 解説 実装コード 2 つのコンポーネントを、 マウスオーバーメニュー と カー
