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

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

 

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

VOL9. 配置に関する設定 その3 ★ 重なる順序

 

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上での呼び出し

<div class="box1">内容1</div>

<div class="box2">内容2</div>

<div class="box3">内容3</div>

<div class="box4">内容4</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

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ともに、最背面に表示されていることに注目して下さい。

div { width: 150px;

height: 100px;

padding: 10px; }

 

div.box1 { position: relative; 

z-index: 0;

top: 60px;

left: 100px; 

background-color: #ffcdfd; }

 

div.box2 { position: static; 

z-index: 1;

top: 120px;

left: 30px;

background-color: #99cdff; }

 

div.box3 { position: absolute; 

z-index: 2;

top: 130px;

left: 150px; 

background-color: #f9796c; }

 

div.box4 { position: static; 

z-index: 3;

top: 160px;

left: 130px; 

background-color: #4dff4d; }

 

 

 

HTML上での呼び出し

<div class="box1">内容1</div>

<div class="box2">内容2</div>

<div class="box3">内容3</div>

<div class="box4">内容4</div>

 

 

 

 

 

 

 

 

 

 

 

 

こうした相関関係は、ブラウザやバージョンによっても異なる可能性があるので、要素の配置方法や表示位置は、その点を考慮して設定する必要があるでしょう。

 

初級篇2.VOL9. 配置に関する設定・その2 <<

>> 初級篇2.VOL9. 配置に関する設定・その4

 

2007.2.12.-2.13.