CSS3

プロパティ

z-index

→●、mdn

積層レベルの指定法。

z-index プロパティは、要素が生成する有位置なボックスに対し、次を指定する：

1. ボックスが属している積層文脈における、ボックスの積層レベル。
2. ボックスは積層文脈を確立するかどうか。

auto

生成されるボックスの積層レベルは、0 になる。ボックスは、根要素でない限り、新たな積層文脈を確立しない。【このプロパティによる効果としては。積層文脈は、他の要因により確立される場合もある。】

●●●●●<BR>
<IMG src="../Sample/Picture.jpg" style="
 position:relative; top:-15px; left:0px;
 z-index:auto;
">
<IMG src="../Sample/Picture.jpg" style="
 position:relative; top:-15px; left:-20px;
 z-index:0;
">
<IMG src="../Sample/Picture.jpg" style="
 position:relative; top:-15px; left:-40px;
 z-index:auto;
">

<integer> ○

生成されるボックスは、新たな積層文脈を確立する。ボックスの積層レベルは、所与の整数になる。

●●●●●<BR>
<IMG src="../Sample/JPG.jpg" style="
 position:relative; top:-15px;
">
<IMG src="../Sample/Picture.jpg" style="
 position:relative; top:-15px; left:-30px;
 z-index:1;
">
<IMG src="../Sample/Picture.jpg" style="
 position:relative; top:-15px; left:-50px;
 z-index:0;
">
<IMG src="../Sample/Picture.jpg" style="
 position:relative; top:-15px; left:-70px;
 z-index:-1;
">

マイナス値はテキストの裏側

この節の表記“手前”は、利用者が面するスクリーンから、利用者に近づく方を意味する。

CSS 2 においては、各ボックスは、横方向、 縦方向の位置に加え、“z‐軸”方向（スクリーン面から垂直に利用者に近づく方向）の位置 ― 略して z‐位置 ― も持つ。z‐位置は、特にボックスたちが視覚的に重なり合う場合に関わり、整形する際の他のボックスによる層との重なり順を表す。この節では、各ボックスが z‐軸沿いのどこに位置されるかについて論じる。

描画ツリーがキャンバスに塗られる順序は、積層文脈を通して述べられる。積層文脈は、別の積層文脈を包含し得る†。積層文脈は、その親の積層文脈の視点からは不可分である ― それらのボックスたちの合間に、他の積層文脈に属するボックスが来ることはない††。

【† すなわち、各 積層文脈は、ボックス ツリーの中の ある下位ツリーを表現する。】
【†† すなわち、親の視点からは、不可分な一枚の層（＝末端の子孫）として扱われる。】

どのボックスも、ある一つの積層文脈に所属する。所与の積層文脈に属する、どの有位置なボックスも、整数の積層レベルを持つ（負にもなり得る）。それは、同じ積層文脈に属する他のボックスの積層レベルに相対的な、z‐位置である ― 同じ積層文脈の中では：

• ボックスたちは、積層レベルがより高いものほど、手前の層に整形される。
• 積層レベルが同じボックスたちは、ツリー順序に則って、奥から手前にかけて積層される。

根要素は、積層文脈が成す階層の根になる。他の積層文脈は、z-index の算出値が auto 以外にされた、有位置な要素（相対的に位置された要素も含む）により生成される。積層文脈は、包含ブロックに関係するとは限らない。将来レベルの CSS では、他のプロパティからも積層文脈が導入され得る ― 例えば、opacity 。

¶以下省略

テスト