CSSZ-Index

CSSを使用してレイアウトを設計する場合、要素を上下または左右に配置することがよくあります。 z-index Z軸の3次元で要素を移動し、煙突効果を（互いの上に）使用できます。

z-index プロパティはautoのいずれかを取ります キーワードまたは整数。これらはすべて有効な宣言です。

z-index: auto;
z-index: -1;
z-index: 9999;

注 ：z-indexを適用するには、positionを使用して要素も配置する必要があります。 相対、絶対、または固定のいずれかのプロパティ。位置が指定されていない場合は、z-index: autoを適用した場合と同じになります。 スタッキングコンテキストは適用されません。

それを念頭に置いて、例を見てみましょう。

モルモットを配置しましょう

この例はCodepenで確認できます。それをいじって、私と一緒にコーディングしてください！

2匹のモルモットまたはCuysを配置します （これはかなりかわいいですね）。私たちが夏にいると想像してみましょう。外は90度以上です。モルモットは湖の中に置かれ、楽しい時間を過ごすでしょう。 Cuy＃2はとても怠惰なので、彼を起こすためにコーヒーを飲む必要があります。そこで、Cuy＃2をコーヒーと積み重ねて、彼が飲めるようにします。

ポジショニングやCSSがない場合、画像は多かれ少なかれ次のようになります。

アイデアは、z-indexを使用してスタッキングコンテキストを作成し、湖とコーヒーの上にいくつかの画像を配置することです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

また、z-indexを適用するには、要素にポジショニングを追加する必要があることを忘れないでください。先に進んで、Cuy＃1を配置しましょう：

img.cuy.one {
  position: absolute;
}

私たちの友達はどこにいるの？先に進んで、より高いスタッキングコンテキストを追加して、湖の上に配置します。

img.cuy.one {
  position: absolute;
  z-index: 1;
}

わーい！私たちのモルモットは湖の上にあります。湖の中に配置するためにパディングを追加する必要がありますが、それで遊ぶのはあなたに任せます。

これで、z-indexを使用してスタッキングコンテキストを作成する方法がわかりました。 、2番目の動物を非常に簡単に配置できます：

img.cuy.two {
  position: absolute;
  width: 160px;
  padding: 100px;
  z-index: 1;
}

ここでも、パディングは画像を正確に配置するためのものであり、幅は私たちの小さな友達のサイズを指定するためにのみ使用されます。これでタスクは完了し、誰もが幸せでリフレッシュした気分になります：

結論

z-indexで遊んで 興味深いレイアウトのアイデアに道を譲ります。 Codepenでは、すべての上にz-indexを配置して配置したポップチャットデザインの2番目の例も提供しました。ぜひチェックしてください！

忘れないでください 常に要素を配置する必要があります。そうしないと、z-indexが機能しません。ポジショニングを削除してCodepenを試してみて、自分の目で確かめてください。

もう1つの推奨事項は、兄弟要素にz-indexを適用する必要があることです。この例では、画像はネストされておらず、兄弟（並んで）でした。 要素が深くネストされている場合、z-indexが期待どおりに機能しない可能性があります 。ですから、それを念頭に置いてください。