z-index 【要素の重なり順を指定する】
[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]
z-indexプロパティは、要素の重なり順序を指定する際に使用します。通常ソースの後の方に記述した要素が、ユーザーから見て、より手前に表示されます。z-indexプロパティを指定した要素は、数字が小さいほど奥へ、大きいほど手前に表示されます。これをスタックレベル(stack level)と言います。
これは、divなどのブロックレベル要素でボックスを入れ子にした時に、positionプロパティでstatic以外の値が指定されている場合、それぞれの要素はレイヤー状(アニメのセル画のような状態)に重なっているため、親要素の幅や高さに関係なく、好きな所に配置出来ます。背景色や、背景画像を指定している場合に、思わぬ所で要素が隠れてしまったり、見た目に不都合が生じる場合もあります。z-indexプロパティは、それを回避するためのものです。
auto
親要素と同じ階層になります。これが初期値です。
数値で指定する
重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。
z-indexの使用例
CSSファイル
.sample001 {
z-index: 1;
 position: relative;
 width: 300px;
 height: 300px;
 background-color: #ffcccc;
 margin: 10px;
}
.sample002 {
 z-index: 2;
 position: absolute;
 top: 50px;
 left: 50px;
 width: 100px;
 height: 100px;
 background-color: #ccccff;
}
.sample003 {
 z-index: 3;
 position: absolute;
 top: 80px;
 left: 80px;
 width: 100px;
 height: 100px;
 background-color: #ccffcc;
}
HTMLソース
<div class="sample001">重なり順 1
<div class="sample002">重なり順 2</div>
<div class="sample003">重なり順 3</div>
</div>
表示すると
表示・配置関連項目
overflow(x y) | はみ出た内容の表示方法を指定する |
position | 要素の配置方法を指定する |
top | 上からの配置位置(距離)を指定する |
right | 右からの配置位置(距離)を指定する |
bottom | 下からの配置位置(距離)を指定する |
left | 左からの配置位置(距離)を指定する |
display | 要素の形式(ブロック・インライン)を指定する |
float | 左寄せ、右寄せ配置の指定 |
clear | 回り込み(float)を解除する |
z-index | 重なりの順序を指定する |
visibility | ボックスの表示・非表示を指定する |
clip | ボックスを切り抜き表示(クリッピング)する |
direction | 文字表記の方向(左右)を指定する |
unicode-bidi | Unicodeの文字表記の方向を上書きする |
writing-mode | 文字表記の方向(縦横)を指定する(IE独自) |