CSS レイヤー（层级）

CSSのz-index属性はposition属性と組み合わせて使用され、Photoshopなどのレイヤー効果を作成できます。

z-index属性を使用してレイヤー内で要素を重ね合わせます。

HTMLページは通常2次元ページと見なされます。なぜなら、テキスト、画像、その他の要素はページ上に並び重ねられていないからです。しかし、水平と垂直位置に加えて、CSSのz-index属性はz軸上でボックスを重ね合わせます。つまり、一つがもう一つ上に重なります。この属性は、堆積水平position値は以下のいずれかです：absolute、fixed、またはrelative。

各レイヤーのz軸位置は、レンダリングの重ね合わせ順序を示す整数で表されます。大きなz-indexの要素は低い要素と重ね合わせされます。

z-index属性を使用してより複雑なウェブページレイアウトを作成することができます。以下はCSSでレイヤーを作成する方法を示す例です。

.box{
　　width:　150px;
　　height:　150px;
　　opacity: 0.9;
　　position: absolute;　　　　　　　　　　　　　　　　　　　　　　　
　　top:　30px;
　　left:　30px;
}
.red{
　　background: #ff0000;
　　z-index:　1;
}
.green{
　　background: #00ff00;
　　z-index:　2;
}
.blue{
　　background: #0000ff;
　　z-index:　3;
}

実行後の効果は以下の通りです:

私たちはz-indexの重ね合わせ順序スタイルは、実際のDIV+CSSのレイアウト時に絶対位置のスタイルが必要で、left、rightを使用して位置を決定し、異なるz-index値でレイヤーの重ね合わせ順序を決定します。