XHTML/CSS・トップ | CSSプロパティ・目次

●ボックスの重なりの順序を指定する

 z-indexは、positionプロパティの値に relativeやabsoluteの値で配置した要素の重なり順番を指定するプロパティです。指定できる値は整数またはautoの値で整数の場合は大きい値ほど前面に表示され、小さい値ほど後ろに回りこみます。初期値は autoで z-indexの値にautoを指定した場合は親要素と同じ重なり順番になりますが同じ親要素を持つ複数の子要素にz-index:autoを指定した場合はHTMLの記述順にかかわらず、CSSの書式において後から(最後のほうに)指定したプロパティほど前面に表示されます。適用できる要素は、positionプロパティで指定できるstatic以外のabsolute、relative、fixed の値を指定できますがabsolute以外は‘position:relative’、‘position:fixed’のみを指定したときと同様のバグがあります。(バグがそのまま引き継がれる)また、z-indexの値にautoを指定した場合はMac版IE5とウィンドウズ版IEのブラウザが未対応です。同様に、positionプロパティの値であるfixedはNetscape4、Mac版IE4.5、ウィンドウズ版IEがそれぞれ未対応です。尚、z-indexプロパティで指定した値は子要素に継承しません。

【CSS】

#sample1 { /* 青いボックス */
 position: absolute;
 z-index: 3;
 right: 160px;
 top: 90%;
 width: 400px;
 height: 140px;
 background-color: #080;
 color: #fff;
}
#sample2 { /* 赤いボックス */
 position: absolute;
 z-index: 2;
 right: 120px;
 top: 87%;
 width: 400px;
 height: 140px;
 background-color: #f00;
 color: #000;
}
#sample3 { /* 黄色いボックス */
 position: absolute;
 z-index: 1;
 right: 80px;
 top: 84%;
 width: 400px;
 height: 140px;
 background-color: #ff0;
 color: #000;
}

【HTML】

<div id="sample1">重なり順番3番目</div>
<div id="sample2">重なり順番2番目</div>
<div id="sample3">重なり順番1番目</div>

※作者コメント

 positionプロパティは指定する値によっては、バグの多いプロパティです。適用されるにあたっては、複数のブラウザで確認されることをおすすめします。また、absoluteの値はほかの要素の影響を受けない特徴があります。周囲に他の要素やテキストがある場合は、ブラウザの画面を狭めたり、フォントを大きくしたりして、周りのテキストや要素との位置を確認すると共にテキストなどをpositionプロパティで指定した要素の左右に回り込ませたい場合として、‘float:left’、‘float: right’といったfloatプロパティを使う方法があります。

重なり順番3番目
重なり順番2番目
重なり順番1番目

※参考
 「絶対配置・相対配置・固定配置

XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2011 http://www.xml.vc/