CSSz-indexプロパティ

を使用する方法z-indexCSSのプロパティ

の中にポジショニングポスト私はあなたが使用できると述べましたz-index要素のZ軸の位置を制御するプロパティ。

複数の要素が互いにオーバーラップしていて、どの要素がユーザーに近いか、どの要素がその背後に隠れているかを決定する必要がある場合に非常に便利です。

このプロパティは数値(小数点なし)を取り、その数値を使用して、Z軸でユーザーの近くに表示される要素を計算します。

z-index値が高いほど、要素はユーザーの近くに配置されます。

どの要素を表示し、どの要素をその後ろに配置するかを決定するとき、ブラウザはz-index値の計算を行います。

デフォルト値はauto、特別なキーワード。使用するauto、Z軸の順序は、ページ内のHTML要素の位置によって決定されます。最後に定義されているため、最後の兄弟が最初に表示されます。

デフォルトでは、要素にはstaticの値positionプロパティ。この場合、z-indexプロパティは何の違いもありません-に設定する必要がありますabsoluterelativeまたはfixed働くために。

例:

.my-first-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 600px;
	z-index: 10;
}

.my-second-div { position: absolute; top: 0; left: 0; width: 500px; height: 500px; z-index: 20; }

クラスを持つ要素.my-second-div表示され、その後ろに.my-first-div

ここでは10と20を使用しましたが、任意の数を使用できます。負の数も。連続しない番号を選択するのが一般的であるため、要素を中央に配置できます。代わりに連続番号を使用する場合は、ポジショニングに関係する各要素のz-indexを再計算する必要があります。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: