を使用する方法z-index
CSSのプロパティ
の中にポジショニングポスト私はあなたが使用できると述べましたz-index
要素のZ軸の位置を制御するプロパティ。
複数の要素が互いにオーバーラップしていて、どの要素がユーザーに近いか、どの要素がその背後に隠れているかを決定する必要がある場合に非常に便利です。
このプロパティは数値(小数点なし)を取り、その数値を使用して、Z軸でユーザーの近くに表示される要素を計算します。
z-index値が高いほど、要素はユーザーの近くに配置されます。
どの要素を表示し、どの要素をその後ろに配置するかを決定するとき、ブラウザはz-index値の計算を行います。
デフォルト値はauto
、特別なキーワード。使用するauto
、Z軸の順序は、ページ内のHTML要素の位置によって決定されます。最後に定義されているため、最後の兄弟が最初に表示されます。
デフォルトでは、要素にはstatic
の値position
プロパティ。この場合、z-index
プロパティは何の違いもありません-に設定する必要がありますabsolute
、relative
または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チュートリアル:
- Flexboxガイド
- CSSグリッドチュートリアル
- CSS変数(カスタムプロパティ)
- PostCSSの概要
- CSSマージンプロパティ
- CSSで要素を中央揃えにする方法
- CSSシステムフォント
- HTMLをスタイルで印刷する方法
- CSSトランジションの入門ガイド
- CSSアニメーションチュートリアル
- CSSの紹介
- CSSガイド
- PurgeCSSとPostCSSでTailwindを設定する方法
- 追い風チートシート
- CSSを使用して画像を連続的に回転させる方法
- CSSを使用してテーブルをレスポンシブにする
- 二等分してCSSをデバッグする方法
- CSSセレクター
- CSSカスケード
- CSSの特異性
- CSS属性セレクター
- CSSカラー
- CSSユニット
- CSS url()
- CSSタイポグラフィ
- CSSボックスモデル
- CSS位置プロパティ
- CSSメディアクエリとレスポンシブデザイン
- CSS機能クエリ
- CSS変換
- CSSを使用してリストのスタイルを設定する方法
- CSSベンダープレフィックス
- CSSの継承
- CSS疑似クラス
- CSS疑似要素
- CSSを使用したHTMLテーブルのスタイリング
- CSSDisplayプロパティ
- CSS calc()関数
- CSSボーダー
- @importを使用してCSSファイルをインポートする
- CSSエラー処理
- CSSフィルター
- CSSボックスのサイズ設定
- CSSの背景
- CSSコメント
- CSSフォント
- CSSパディング
- CSSのfloatプロパティとクリア
- CSSの正規化
- CSSz-indexプロパティ
- CSSを使用してテキスト選択を無効にする方法
- CSSを使用してコンテナの下部にアイテムを配置する方法
- CSSを使用して色を反転する方法
- CSSのレスポンシブプレタグ
- レスポンシブYouTubeビデオ埋め込み
- レスポンシブデザインに適したCSSブレークポイント値は何ですか?
- フレックスボックスの中心を揃える方法