この記事を読めば、CSSで重複するdivを作成できるようになります。そのために、まず「」について学びます。 位置 ' と ' Z インデックス ' プロパティ。
始めましょう！
CSS「位置」プロパティ
HTML では、「 位置 ' 財産。 Web ページ上の要素の最終的な位置は、その右、左、上、下、および z-index プロパティとの組み合わせによって決定されます。
構文
位置プロパティの構文は次のとおりです。
位置 : 価値
の場所で ' 価値 」では、絶対、相対、固定、スティッキーなど、要素のさまざまな位置を設定できます。
CSS「z-index」プロパティ
「 Z インデックス 」プロパティは、要素のスタック順序を設定するために使用されます。 z-index の値が大きい要素が他の要素の前に配置されます。
構文
z-index プロパティの構文は次のとおりです。
Z インデックス : 自動 |番号上記の構文では、「 自動 」は、親要素に従って順序を設定するために使用されますが、手動シーケンスの場合、「 番号 」が z-index プロパティの値として設定されます。
それでは、CSS で重複する div を作成する実際の例に移りましょう。
例 1: 2 番目の Div と最初の Div の重複
HTML セクションでは、2 つの div を作成し、異なるクラス名を「 div1 ' と ' div2 」。
HTML
< 体 >< 分周 クラス = 「div1」 >< / 分周 >
< 分周 クラス = 「div2」 >< / 分周 >
< / 体 >
次に、CSS に移動し、指定された指示に従います。
- 位置プロパティの値を「 絶対の 場所 div1 の場合は、正確に必要な場所です。
- div1の高さと幅を「 250px ' と ' 300px 」。
- z-index の値は「 1 」。
- div1の背景色を「 RGB(4, 3, 75) 」。
CSS
.div1 {位置 : 絶対の ;
身長 : 250px ;
幅 : 300px ;
Z インデックス : 1 ;
バックグラウンド : RGB ( 4 、 3 、 75 ) ;
}
出力
最初の div が正常に配置されました。次に、2 番目の div に移動します。
div2 をオーバーラップするには、指定された指示に従います。
- div2 の position プロパティ、width、height の値を「 div1 」。
- z-index の値を「 2 」を使用して、最初の div の前に配置します。
- div2 の別の背景色を「 RGB(0, 204, 255) 」。
- div2の余白を「 50px 」を margin-top および margin-left 値として指定します。
- div2の不透明度を「 0.7 」。
CSS
.div2 {位置 : 絶対の ;
幅 : 300px ;
身長 : 250px ;
Z インデックス : 3 ;
バックグラウンド : RGB ( 0 、 204 、 255 ) ;
マージン : 50px ;
不透明度 : 0.7 ;
}
出力
Div2 は div1 と正常にオーバーラップします。
div1 を div2 の上に設定する場合は、z-index の値を変更するだけです。この例を見てみましょう。
例 2: 最初の div と 2 番目の div のオーバーラップ
この例では、両方の div の z-index の値を変更します。の中に ' .div1 ” CSS ファイルのクラス、” の値を設定します。 Z インデックス ”プロパティとして” 2 」：
Z インデックス : 2 ;その後、「 .div2 ” クラスで、” の値を設定します。 Z インデックス ”プロパティとして” 1 」：
Z インデックス : 1 ;その結果、最初の div は 2 番目の div の前に配置されます。
CSS で 2 つの重複する div を作成する最も簡単な方法をまとめました。
結論
「 位置 ' と ' Z インデックス ” プロパティは、CSS で重複する div を作成するために使用されます。デフォルトでは、z-index の値は 1 で、新しく作成された div が既存の div の前に配置されることを示します。ただし、必要に応じて任意の値を指定して、重複するシーケンスを調整できます。この記事では、CSS で重複する Div を作成する方法を紹介しました。