CSS要素のオーバーラップを?qū)g現(xiàn)するには、ポジショニングとZインデックスを使用してケーシング順序を制御する必要があります。 1。位置を使用します：相対、絶対、または固定されて、通常のドキュメントの流れから要素を削除し、それらを配置します。 2. z-index屬性を介してスタッキングレベルを設(shè)定すると、値が大きくなるほど、前方が高くなりますが、位置決め要素にのみ有効になります。 3.一般的なモードには、カードレイアウト、コーナーバッジなどが含まれます。親コンテナは、効果に影響を與える新しいスタッキングコンテキストを作成する場(chǎng)合があることに注意してください。 4.アバターやラベルスタッキングの場(chǎng)合、マージン左：-20pxなどの負(fù)のマージンで単純なオーバーラップを?qū)g裝できます。重複する効果を正確に制御するための位置付け、スタッキングコンテキスト、Zインデックスアクションメカニズムを正しく理解します。

CSSの重複要素は、畫像を積み重ねたり、カードレイアウトを作成したり、複雑なUIを構(gòu)築したりするかどうかにかかわらず、Webデザインで使用される一般的なレイアウト手法です。オーバーラップの鍵は、ポジショニングとZインデックスにあります。適切に行う方法は次のとおりです。

1.ポジショニングを使用して要素を移動(dòng)します

要素を重複させるには、そのうちの少なくとも1つを、 positionを使用して通常のドキュメントフローから取り出す必要があります。最も一般的なアプローチ：

• position: relative - 他の人に影響を與えることなく、要素を通常の位置からシフトします。
• position: absolute - 最も近い位置にある祖先に対する要素を配置します。
• position: fixed - ビューポートに関連する位置（オーバーレイに役立ちます）。

例： relativeおよびabsoluteとオーバーラップします

<div class = "container">
  <div class = "box red">ボックス1 </div>
  <div class = "box blue">ボックス2 </div>
</div>

 。容器 {
  位置：相対; / *スタッキングコンテキストを確立する */
  幅：300px;
  高さ：200px;
}

。箱 {
  幅：200px;
  高さ：100px;
  位置：絶対;
}

。赤 {
  背景：赤;
  トップ：20px;
  左：20px;
}

。青 {
  背景：青;
  上：60px;
  左：60px;
}

この例では、両方のボックスが比較的配置された容器內(nèi)に絶対に配置されているため、オーバーラップできます。

z-indexで積み重ね順序を制御します

z-indexプロパティは、どの要素が上に表示されるかを制御します。より高い値が正面に表示されます。

 。赤 {
  z-index：1;
}

。青 {
  z-index：2; / *これは上に表示されます。red */
}

？注： z-index 、配置された要素（つまり、 relative 、 absolute 、 fixed 、またはsticky ）でのみ機(jī)能します。

3.一般的な重複パターン

?重複カード（例、テキストの畫像）

 .card {
  位置：相対;
  幅：300px;
}

.card-img {
  位置：絶対;
  トップ：-20px;
  右：-20px;
  幅：100px;
  高さ：100px;
  z-index：1;
}

これにより、カード本體の上に畫像がわずかに持ち上げられます。

?バックグラウンドバッジまたはリボン

.ribbon {
  位置：絶対;
  上：0;
  右：-30px;
  幅：120px;
  変換：回転（45DEG）;
  背景：赤;
  色：白;
  テキストアライグ：センター;
  z-index：2;
}

ボックスの上隅にオーバーラップする回転リボン。

4。ヒントとゴッチャ

• z-indexを使用する前に、常にpositionを設(shè)定してください。
• スタッキングコンテキストに注意してください。Z z-indexを持つネストされた要素は、親が獨(dú)自のスタッキングコンテキストを作成する場(chǎng)合、予想どおりに動(dòng)作しない場(chǎng)合があります（例：不透明、 transform 、またはz-index介して）。
• マイナーなオーバーラップのより単純な代替品として負(fù)のmarginを使用します（以下を參照）。

代替：負(fù)のマージンとオーバーラップ

単純なケース（インライン要素のような）の場(chǎng)合、ポジショニングは必要ありません。

 .Overlap {
  マージン左：-20px; / *要素を前のものに戻します */
}

アバタースタックやタグに役立ちます。

基本的に、CSSの重複は、位置決めと階層化に帰著します。 positionを使用して要素を移動(dòng)し、 z-index動(dòng)かして誰がトップにいるか、およびレイアウトフローが許可されたときにnegative margin制御します。複雑ではありません。コンテキストとスタッキング順に注意してください。

以上がCSSの要素をオーバーラップする方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。