【CSS】z-index: auto;とz-index: 0;の違いを知りたい。

Question

CSSのz-indexプロパティについて調べています。z-indexがスタック文脈に影響される点は理解し、挙動の違いも確認できたのですが、z-index: auto;とz-index: 0;の違いがいまいち理解できていません。挙動を確認したところ、同階層での配置となり、両者の違いがわかりませんでした。明確な違いをご存知の方がいらっしゃいましたら、教えていただけないでしょうか？

Answer 1

スタイルシートリファレンスによれば

整数値で指定

重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。
auto
親要素と同じ階層になります。これが初期値です。

基準は親か0か、ですね。

またCSSリファレンスでは、下記のように記載されています。

プロパティの書式と機能

z-indexプロパティは、positionプロパティでabsolute, fixed, relativeのいずれかが指定されたボックスに対し、スタックレベル（重なりの順序）を指定します。初期状態では全要素がz-index:auto（整数値では"0"）であり、特定の要素にz-index:1を指定した場合は最前面に、z-index:-1を指定した場合は最背面に表示されることを意味します。
プロパティの書式 機能
z-index: auto 要素の記述順に従って描画する
z-index: <integer> スタックレベルを整数値で指定する
z-index: inherit 継承

もしあれでしたら「両者の違いがわからない」コードを例示していただけると具体的な回答が得られるかもしれません。