CSSでレイアウトする際、z-indexが期待通りに機能しない時がありませんか? z-indexは重なり順を定義するプロパティですが、単なる重なり順だけでなく、いくつか複雑なルールがあります。 z-indexがうまく効かない時の主な4つの原因とそれぞれへの対応方法について紹介します。 4 reasons your z-index isn’t working (and how to fix it) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 同じコンテンツ内で積み重なっている要素は出現順に表示され、後の要素は前の要素の上に表示される 2. 要素にpositionが設定されていない 3. opacityやtransformなどのプロパティを設定すると、要素は新しい積み重ねコンテキストに配置される 4. 子要素のz
![CSSでz-indexが効かない時の4つの原因とその対応方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd1943d3d003c62cc6de89fcf0dd0ee608c7630c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202301%2F2019051101%402x.png)