例外はつきもの
前ページで、実戦的な考え方と手法を纏める事に注力しましたが、それが当てはまらない大きな例外があります。
前ページの説明は、positionに「absolute」「fixed」「relative」などを指定された要素で、z-index値を指定された要素間の前後を扱いました。 ただ、忘れてならないのは、そういう指定の無い本来のHTML要素と、z-index値を持つ要素間の前後の順位です。 これには前ページの説明が当てはまらないので、再考察しました。
負のz-index指定で気付いた例外的なふるまい
前ページのモデルのままで、BlueとGreenに「z-index:-1」Orangeに「z-index:0」を指定しました。 負のz-index値のふるまいを確認しようと思ったのですが、早速に説明がつかなくなりました。
左のBlueは、「順位階層」の考え方が当てはまります。 BlueとOrangeの前後を考えると、「順位階層」はGrayにあり、Grayから見るとBlueの前後を決めるのはOrangeのz-index値で、Orangeは自らのindex値を競う変な話ですが、同値のBlueが背後にならないと考えれば一応筋が通ります。
しかし、GreenはRedの背後になり、「順位階層」の考えが当てはまりません。 Blueは理屈に合うが、それならGreenもRed上に残るはずです。 で、ネットを調べると、z-index値を持たない要素との前後関係は、例外というより別扱いにする必要がある事が判りました。
z-index:auto（無指定）と z-index:0 とは大変に異なる
relativeやabsoluteとz-index値を指定された要素は特別なふるまいをし、その指定がない無垢のHTML要素とは、根本的に異なったものです。
実はRedには、レイアウトの基準位置にするため、便宜的に「position:relative」を指定して、z-indexを指定していませんでした。 これは「z-index:auto」と同等で、「特別」と「特別でない」中間状態のふるまいを生じた様です。
下は上図の場合で、Redに明示的に「z-index:0」を指定したものです。
これは、「順位階層」の考え通りになりました。
RedとGreenの前後を決める「順位階層」はbodyです。 bodyから見て、Greenの前後はRedの「z-index:0」で決定され、これはRedと同じとなり GreenはRed上に表示されます。（入れ子の場合はHTML上で親に対して子は後方の記述と考えています）
結局、最初のRedは「static」要素と同じふるまいをしていた様です。
static要素と z-indexを持つ要素の前後順位
「z-index:-1」以下の負値を指定された要素は、stasic要素に対して「順位階層」内で後方に廻ります。 z-indexを持つ要素間では、「-1」も「0」も順位列上の位置です。 ところがstatic要素には比較値自体がなく、static要素に対しては「負」か「0以上」かで前後順が決まります。 その結果、下位の階層にstatic要素が複数ある場合、「負」のz値を指定した要素は、とたんにそれらの階層の全ての後方に周ります。 もし、途中に非static要素があれば、これは「順位階層」で言うより下位の階層でz-index値を持つ要素で、その前方に表示されることになります。
つまり、負のz値はz-indexを持つ要素とstatic要素の両方の順位に影響する、特殊な指定と考えるべきでしょう。
●Redにz値指定の無い状態のまま、Blue、Orange、Green に「z-index:-1」を指定した状態が以下です。
このページの最初と同じですが、OrangeはGrayとRedが「static」なので、両方の後方に後退しています。 全ての要素はbodyよりは後方にはならない規則がある様で、OrangeもGreenも、bodyの前面に表示されています。
●次にRedに「z-index:0」を指定してみます。（値は -1でも10でも同じ結果で、ここでは数値を指定して非staticにする事が肝心です）
Redが「z-index」を持つ要素になったので、OrangeとGreenはbodyを「順位階層」としてRedより前面に表示される様になりました。 左のOrangeはGrayの後になりますが、bodyまでは後退しません。 後方にz-index値を持つRedが出来たので、そこで後退が止まったと言えます。 負のz値を指定した要素は、下位階層でz-index値を持つ要素の前まで後退するという事です。
static要素とz-indexを指定された要素の前後順位に関して、「順位階層」考え方を適用する事も出来そうです。 しかし、論理的な整合性を主張しても、あまり意味が無い様に思います。
「順位階層」の考え方は、z-index値を指定された要素間の前後を解析し、コントロールする際に有効で、static要素との前後関係の解釈には、特に必要が無い気がします。 もし「z-index:-1」指定の要素をコントロールする場合は、先ず「z-index:0」 に改めて、非static要素間の前後を「順位階層」考え方で確認すれば良いと思います。（余りそんな場面を思いつけませんが）