CSSの要素を積み重ねる方法

ウェブ上で素晴らしくユニークな視覚体験を作成したい場合は、最終的に同じ場所にオーバーラップまたは存在するために2つの要素が必要になります。あなたはそれらを互いに近くまたは隣に配置する必要があるかもしれません。これを達成するための2つの異なる方法を説明しましょう。1つはポジションプロパティとCSSグリッドを備えたものです。

方法1：位置プロパティの使用

あなたはすでにその位置を知っているかもしれません：絶対。あなたが望んでいるところならどこでも、ページに絶対に何かを置きます。この場合、私たちは子供を絶対にページの左上に配置しています。親がどこにいても、子供は絶対にそのコーナーに置かれます。

 。子供 {
  ...
  位置：絶対;
  上：0;
  左：0;
} 

ペンを参照してください
CSSスタッキング、Absolute 1 by Sarah Drasner（@sdras）
Codepenで。

しかし、これは非常に脆いです！ページに何かを置いて、それから何か他のものがやって来た場合はどうなりますか？ナビゲーション内には、左上のコーナーに常に必要なアイコンがあるかもしれませんが、サードパーティがやって来て、バナー広告に入っています。 （私はバナー広告を提唱していませんが、それらは存在します。）これにより、ナビゲーションが押し下げられ、アイコンは場違いになりました。

または、複数の場所で使用できる自己完結型コンポーネントを作成したいとしましょう。どこで使用しても、再利用可能で、独自のコンテキスト内で作業する必要があります。

ポジションを置く場合：相対;親要素については、その中のすべての位置：絶対的なもの。それを含むユニットと比較して、絶対に配置されます！

 。子供 {
  / * ... */
  位置：絶対;
  上：0;
  左：0;
}

。親 {
  位置：相対;
} 

ペンを参照してください
CSSスタッキング、Absolute2 by Sarah Drasner（@sdras）
Codepenで。

ニース。

2つの要素を互いに積み重ねたい場合は、この同じ前提を使用できます。ここでは、2つの子供の要素が互いの上に積み重ねられ、150ピクセル離れたところに設定されます。それらは今、同じ親に含まれており、その中に配置されたままであることがわかります。

親

子供1

子供2

 。子供 {
  位置：絶対;
  上：0;
}

.child-1 {
  左：0;
}

.child-2 {
  左：150px;
}

。親 {
  位置：相対;
} 

ペンを参照してください
CSSスタッキング、Absolute3 by Sarah Drasner（@sdras）
Codepenで。

これは少し古い学校ですが、私は何年もそれを使用してきましたが、私はまだそれに手を伸ばしています。ブラウザ全体で一貫して動作し、最も奇妙でユニークな配置を達成するのに役立ちます。

方法2：CSSグリッドの使用

要素が積み重なる別の良い方法、それらを積み重ねる、またはそれらの配置を変更することは、CSSグリッドです。

このようなコンテナに必要なものを置くことができます：

 。親 {
  ディスプレイ：グリッド;
  Grid-Template-Columns：250px 1fr;
  グリッドテンプレート列：150px 1fr;
}

。子供 {
  グリッドエリア：1/1 / 2/2;
} 

ペンを参照してください
CSSスタッキング、グリッド1 by Sarah Drasner（@sdras）
Codepenで。

また、1つの要素が他の要素を積み重ねる場合、まったく同じグリッド領域に配置できます。また、マージンを使用して少し相殺しましょう。

 。親 {
  ディスプレイ：グリッド;
  Grid-Template-Columns：250px 1fr;
  グリッドテンプレート列：150px 1fr;
}

。子供 {
  グリッドエリア：1/1 / 2/2;
}

.child-2 {
  マージン左：200px;
} 

ペンを参照してください
CSSスタッキング、Sarah DrasnerによるGrid 2（@sdras）
Codepenで。

この手法を視覚化するのが難しいと思う場合、私は物事をより明確に見るのに役立つCSSグリッドジェネレーターを作成しました。

これらのテクニックを使用する場所はたくさんあります！要素をスタック、レイヤー、オフセットできます。ナビゲーション、フッターを作ることができます。あらゆる種類のレイアウトを作成できます。ここでは、要素がページにどのように配置されるかをより細い粒の制御が必要にします。

以上がCSSの要素を積み重ねる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。