z-indexがあるもの同士
z-index:10
z-index:5
ごく普通にz-indexの値が大きいものが上になります。
z-indexがあるものとないもの
z-index:10
transform:translate(50px,50px)
z-indexが1以上のものと、その他のスタッキングコンテキストを比べたら、z-indexがある要素が上になります。
z-indexが0とないもの
z-index:0
transform:translate(50px,50px)
z-indexが0だと、要素の出現順で後のものが上になります。
z-indexが同じ値
z-index:10
z-index:10
z-indexの値が同じ場合は要素の出現順で後のものが上になります。
z-indexが同じ値(order)
z-index:10、order:2
z-index:10、order:1
orderプロパティを使って出現順を入れ替えた場合、order順が後のものが上になります。
z-indexが負でも
親スタックより後ろにはいけない
z-index:-1
親要素(position-wrapper)にスタッキングコンテキストが発生しているので、それより後ろには配置できません。
z-indexがなくても
スタッキングコンテキストっぽく振る舞う1
下のレイヤーの文
position:absolute
z-index:auto
z-index:auto
positionを指定したら、スタッキングコンテキストのように重なる
z-indexがなくても
スタッキングコンテキストっぽく振る舞う2
下のレイヤーの文
transform:translate(50px,50px)
position:absolute
z-index:auto
z-index:auto
z-index:autoの高低関係はz-index:0の挙動と同じ。後の要素が上になります。
スタッキングコンテキストは発生していませんが、要素順でpositionの方が後なのでtranslateの要素より上に来ます。