ホームページを作ろうヨ!!

★このページでは、CSSの基本的な仕様について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL９. 配置に関する設定　その３ ★ 重なる順序

z-index: <値>;

「position:」を使って、要素ごとに表示位置を指定した場合、内容によっては画面上で重なる部分が出てくることがあります。こういう場合に、どの順序で重なるかを指定するのが「z-index:」です。

<値>は0を基準にして整数値で指定しますが、数値が大きくなるほど前面に重なるようになります（ex1.参照）。ただし、「position: static;」が設定されている要素は「z-index:」に関わりなく一番下になり、位置指定も無視されるので、実際の表示位置も他の要素の「position:」指定との相関関係に応じて処理されます。（ex2.参照）。

キーワードは「auto」のみで、これを指定すると通常と同じようにHTML上での記述順に重なり、後に来るほど上に重なります。なお、デフォルトは「auto」です。

ex1.<div>を個別に4つ設定し、それぞれに「z-index:0;」～「z-index3」を指定する。

div { width: 150px;

height: 100px;

padding: 10px; }

div.box1 { position: relative;

z-index: 0;

top: 60px;

left: 100px;

background-color: #ffcdfd; }

div.box2 { position: absolute;

z-index: 1;

top: 120px;

left: 30px;

background-color: #99cdff; }

div.box3 { position: absolute;

z-index: 2;

top: 110px;

left: 150px;

background-color: #f9796c; }

div.box4 { position: absolute;

z-index: 3;

top: 160px;

left: 130px;

background-color: #4dff4d; }

→

HTML上での呼び出し

→

ex2.<div>のどれかに「position: static;」が指定されていると、その要素は下の例のように「z-index:」に関わりなく一番下になり、位置指定も無視されるため、表示位置も変わります。例えば...

・box1に「position: relative;」が指定されているので、「position: static;」が指定されているbox2は、box1が元来の位置に存在するものとして空間を空けてその下に表示されますが、

・box3は「position: absolute;」が指定されているため、box4が「position: static;」であっても、box3は元来の位置に存在しないものとして空間を空けずに表示されています（box3が「position: relative;」なら、box2とbox4の間にもbox3の分の空間が空きます）。

また、「position: static;」が指定されているbox2、box4ともに、最背面に表示されていることに注目して下さい。