z-index: auto; を理解する

概要

を読んで z-indexを指定しなかった場合のいろんなパターンを試してみたくなったので試したものを整理する

TL;DR

• z-indexなしの兄弟要素 → 後に書いた方が上
• z-indexなしの子孫要素 → 子孫要素の方が上
• z-indexなしの擬似要素 → 元の要素/before/afterの順番
• clip-pathを使った兄弟要素 → 後に書いた方が上
• clip-pathを使った子孫要素 → 後に書いた方が上だけど親要素のclip-pathの範囲が優先される
• clip-pathを使った擬似要素 → 元の要素/before/afterの順番だけど親要素のclip-pathの範囲が優先される

z-indexなしの兄弟要素

z-indexなしの子孫要素

z-indexなしの擬似要素

clip-pathを使った兄弟要素

clip-pathを使った子孫要素

clip-pathを使った擬似要素