いまさらのz-indexでの重なりと疑似要素と | WordPressのカスタマイズ

あたりまえのように知っているはずのz-index。
ちょっと必要なことがあって、改めてちゃんと確認しようということに。

2021/05/14 にサンプル例として画像を使っていたものを、全て実際の HTML + CSS での表示に直しています。
そのため同じボックスを少しづつ変えながらの表示となるので、実際にはそれぞれに固有の id や class がつけてあり、位置関係などを補正するための margin や padding が設定してあります。ご了承のほど。

とりあえず、以下のようなモデルを用意。

なんてことはない兄弟ボックスにそれぞれに子要素のボックスのdiv を一つづつ。p は文字列表示用なのでほぼ無意味。
ボックスbrother_Aとbrother_Bは、その名の示す通り、同じアウトラインレベルの兄弟関係にある要素。z-index を指定しなければ、重なりは平和に上図のように落ち着きます。

<div id="top">
	<div id="brother_A">
		<p>Brother_A</p>
		<div id="A_son">
			<p>A_son</p>
		</div>
	</div>
	<div id="brother_B">
		<p>Brother_B</p>
		<div id="B_son">
			<p>B_son</p>
		</div>
	</div>
</div>

z-index を設定するためにそれぞれposition=relative を設定。
それぞれのmargin やら padding やらの値は、重なり具合をよくわかるようにする位置調整のためのものでこれもほとんどどうでもいい事。padding-bottom の値は、空のボックスの高さを設定するもので、これがないとぺしゃんこになるだけ。

#brother_A{
	position:relative;
	width:70%;
	background: lightgrey;
	padding:3%;
}

#brother_B{
	position:relative;
	width:70%;
	background:orange;
	text-align:right;
	padding:3%;
	margin:-50% 0 0 20%;
}

#A_son{
	position:relative;
	width:80%;
	padding-bottom:90%;
	background: lightblue;
	margin:5% auto;
}

#B_son{
	position:relative;
	width:80%;
	padding-bottom:90%;
	background: pink;
	margin:5% auto;
}

親要素であるbrother_A、brother_B ともにz-index を設定した場合、子要素のz-index の設定はそれぞれ一つづつなので、ほぼ意味がない。
brother_A にbrother_Bよりも大きな値、たとえばbrother_Aにz-index:1、brother_Bにz-index:0 の設定をすれば、上下関係がひっくりかえるということです。
と、いうことは当然の事ですが、ここでbrother_A のz-index を設定しない、またはauto に設定すると、子要素A_son のz-index が意味を持ってきます。
以下のようにそれぞれのz-index を設定すると・・・。

#brother_A{
	z-index:auto;
}

#brother_B{
	z-index:0;
}

#A_son{
	z-index:1;
}

#B_son{
	z-index:1;
}

と、このようにA_son だけが、自らの親要素であるbrother_A とともにbrother_B をはさむように一番上に位置するようになります。
ちなみにA_son はわかりやすいように透けて見えるようにしています。画像のB_son のz-index が5になってますが、これもいくつに設定しても全く影響しないということを示すためのもの。

それぞれのスタックレベルが決定されるのは、z-index を指定したことにより作成されるスタックコンテキストによるものであることを身に染みて理解していれば、こうなるのは当然のことと思えるようです。
わたし？・・・、どうでしたか・・・？
z-index:auto の設定ではスタックコンテキストは作成されないということです。

position でstatic 以外（ relative、absolute、fixed ）を指定し（ これが必須 ）、z-index にて重なりの位置を指定することによって生成される階層構造であるスタックコンテキスト。z-index を指定された要素のスタックレベルを0 としたローカルなスタックコンテキストが生成され、そのスタックコンテキストはそれぞれの構造内におけるものであり、あるボックスが同時に複数のボックスのスタックコンテキストにまたがって属したり、他のスタックコンテキスト内のボックスが任意のボックスの間にくることはできないということなのです。 スタックコンテキストが生成されたボックスどうしにおいて、それに属する要素どうしが複雑に重なり合うということは出来ないということだと思われますが、これって、逆に言えばスタックコンテキストを生成しさえしなければ、たとえば同じアウトラインレベルにある兄弟要素の子要素どうしを重なり合わせることも出来るということになります。

と、いうか、実はよくやってることではありますね。まぁ、それはのちほどということで。
基本的には、それぞれのボックス構造において、z-index が設定されている最も外側の要素が基準となるスタックレベルにあって、他の要素のそれぞれの基準となるスタックレベルどうしが同じレベルにあるということを基準にして、重なり具合を考えればわかりやすいということで良いのだろうと。
で、これは疑似要素（ Pseudo-elements ）の:before、:after でも同様です。
A_son に:after で以下のように疑似要素を作成しました。

#A_son:after{
	content:"A_son:after z-index:1";
	display:block;
	position:relative;
	width:80%;
	padding-bottom:90%;
	margin:20px;
	background:rgba( 2, 145, 184, 0.8 );
	z-index:1;
}

そしてこの場合、これの元要素のA_son のz-index をauto に設定すると予想通りにこうなります。

この状況を何かに使えそうだという事で、もうちょっと構造を追加してみます。

といいつつ、疑似要素 (Pseudo-elements)の件で忘れてはいけないことがあるので少し脇道へと。
疑似要素 (Pseudo-elements)、:before、:after で作成した要素を本家の要素の下へ配置したい場合。この場合、:before、:after で作った要素のz-index を-1 や-2 等、負の数で指定するわけですが、そこで忘れてはならないのが、この場合もやはり本家のz-index は指定しないかまたはauto で設定すること。これが重要ですね。下図のB_son になります。

B_sonも重なり具合がよくわかるように透かしてありますが、 そこでもう一つ、気をつけなければいけないことがあるのです。透明度を変えるために使う opacity。で、やっていて気がついたことなのですが、実はこの opacity も 1 以外の数値を設定した場合に、スタックレベルに影響が出るということです。透明度を変えた時に、重なり具合も変わってしまうので通常なら気がつくのではあるけれど・・・。ちなみにこの場合は、背景色の透明度を設定していますね。

話を元にもどして・・・。
A_son に子要素を二つ。brother_A から見ると孫要素になります。
この孫要素はz-index:0 の設定でbrother_B の下になってます。それをA_son:hover で孫要素の一つA_grandson_C をz-index:1 に設定してbrother_B の上に表示させるようにしてあるのが下図。
重なりを確認するためにB_son にも疑似要素:before、:after を追加してありますね。

そしてもちろん、孫要素の一つA_grandson_C:hover にて、もう片方の孫要素A_grandson_D のz-index を変更して上に表示させることもできます。

z-index をそれぞれいろいろに設定して、孫要素のA_grandson_C:hover にて、もう片方の孫要素A_grandson_D のz-index を1から3に変更して上に表示させるようにしてあるのが下図。

と、言う事で実際にこれを使っているのがここ→Red-breasted Flycatcher images viewer。
画像をタイル状に並べて、その画像の情報はそれぞれ画像の下層に入っている。画像にonmouse でその情報を表示することは簡単な事なんだけど、いちいち出てくるのもなかなかわずらわしい。で、必要な時だけその情報を表示させたいということを考えた時に、下の層にある要素の疑似要素だけを上にして表示することがはたして出来たものかと、改めて確認したものです。
ちなみに違う方法で同じような意図を施しているのがここ→Images Viewer page。
見た目がそっくりですが、前述のページの親ページです。
これはこれで、とは思うものの・・・。
css だけで本当にいろいろな事ができるようになったなぁ～、と思う今日此の頃です。