構文
z-index : 順序;説明文
「position」でrelativeやabsoluteを指定し，表示位置を指定すると，そのほかの要素と重なり合ってしまう場合がある。通常，要素が重なってしまう場合は，HTMLで後に記述された要素を上に重ねて表示する。
「z-index」は，要素の重なり順序を明示的に指定できる。値が大きいほど上に要素が配置されるようになる。例えば，<h1>要素に「z-index:2」，<div>要素に「z-index:1」と指令されている場合，<div>要素の上の<h1>要素を重ねて表示するようになる。
使用例
● CSSの定義
div { position : absolute; }
div.one { z-index : 5;
top : 110px;
left : 140px;
background-color : #ffd0d0;
padding : 10px;
font-size : 16pt; }
div.two { z-index : 2;
top : 0px;
left : 50px;}
div.three { z-index : 3;
top : 50px;
left : 100px;}
div.four { z-index : 4;
top : 100px;
left : 150px;}
● HTMLの例
<div class="one">Italy Photos</div>
<div class="two"><img src="photo_01.jpg"></div>
<div class="three"><img src="photo_02.jpg"></div>
<div class="four"><img src="photo_03.jpg"></div>● 表示結果
Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]
