2つのdivタグがあり、それぞれにトラと、豹の画像が含まれている。
1つ目のdivと画像は赤い枠で、2つ目のdivと画像は緑の枠で囲っている。
画像のZ-indexは、以下の表のようになっているので、2つ目の画像が上になりそうだが親のdivタグのZ-Indexが1つ目が2、2つ目が1なので1つ目の画像が上になる。
1つ目トラ | 1つ目の豹 | 2つ目トラ | 2つ目の豹 |
1 | 2 | 3 | 4 |
つまり、Z-Indexは同じ親を持つエレメント同士で有効ということである。
これは絶対座標の指定の場合も言える。このサンプルでdivタグと、画像はすべてposition:absolute;の指定がしてあり、1つ目と、2つ目の画像の座標は同じ指定がしてある。
しかし、親のdivの座標が異なるため同じその分ずれて表示される。つまり、エレメントの絶対座標もその親エレメントからの相対座標ということである。
(ただし、親もposition:absolute;と指定されていなければならない。これはZ-Indexについても同様。)