z-index: auto; を理解する
この記事は最終更新日から5年以上が経過しています。
概要
を読んで z-indexを指定しなかった場合のいろんなパターンを試してみたくなったので試したものを整理する
TL;DR
- z-indexなしの兄弟要素 → 後に書いた方が上
- z-indexなしの子孫要素 → 子孫要素の方が上
- z-indexなしの擬似要素 → 元の要素/before/afterの順番
- clip-pathを使った兄弟要素 → 後に書いた方が上
- clip-pathを使った子孫要素 → 後に書いた方が上だけど親要素のclip-pathの範囲が優先される
- clip-pathを使った擬似要素 → 元の要素/before/afterの順番だけど親要素のclip-pathの範囲が優先される