z-indexのしくみ
static
以外の positoin
プロパティを併せて指定する必要があるz-index: auto;
position: static;
以外の要素には自動的に z-index: auto;
が適用されるposition: relative;
もしくは position: absolute;
であり、かつ z-index
に整数値が設定されているときposition: fixed;
もしくは position: sticky;
z-index: auto;
を指定した要素のスタックレベルは0となるz-index: auto;
の場合はスタックコンテキストは形成されない(親コンテキストの一部とみなされる)z-index: 0;
の場合はスタックコンテキストが形成されるA → B-1 → B-2 → B
となる
B-1
の z-index
が最も大きいが、 A
より上にくることはないA
と B
のスタックコンテキストが異なるからであるB
は B-2
よりも z-index
の値が大きいが、自身がローカルスタックコンテキストの基準となってしまっているため、子要素である B-2
の上にくることはできないHTML
┣ A (z-index: 5;)
┗ B (z-index: 4;)
┣ B-1 (z-index: 10;)
┗ B-2 (z-index: 2;)