MightyCSSz-indexプロパティ

この記事では、の使用方法について学習します。 z-index CSSプロパティ…CSSで3次元に侵入する唯一の方法！

CSSを使用してスタイルを設定する場合、ほとんどの場合、CSSは2D平面上にあります。 HTML要素は、テトリスの積み重ねブロックのように、ページ上に水平/垂直に配置されます。 The z-index このパラダイムを変更し、3番目の平面であるz軸に視覚的な階層を定義する機能を提供します。

---

このコードスニペットでは、 #navbar、オーバーラップします #footer （位置が重なっている場合）z-indexが高いため。

#navbar {
  position: relative;
  z-index: 11;
}

#footer {
  position: relative;
  z-index: 10;
}

使用していなかった場合 z-index まったく、ナビゲーションバーはフッターを重ねるのではなく、単に押しのけるだけでした。

用途 z-index

コード自体を見るのは少し抽象的なので、このデモをチェックしてみましょう。 z-index 使用されている。

CodePenのalligatorio（ @alligatorio ）によるペンeYZEoVLを参照してください。

<div>
  <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" />
</div>
<div id="magazine-title">
  Sammy the Shark
</div>

#portrait {
  position: relative;
  z-index: 1
  width: 200px;
}

#magazine-title {
  position: relative;
  z-index: 2;
  top: -2em;
  left: 2em;
  font: normal 2em sans-serif;
  color: darkslategray;
  background-color: whitesmoke;
  border: 3px dotted darkslategray;
}

使用する z-index、テキストを画像に重ねることができます！ これは、レイヤーがWebデザインについて考えるための異なる方法を導入するための小さな方法です。

マイナーな警告

あなたが鋭い目を持っているなら、あなたはおそらく以前のコードスニペットが使用されていることに気づいたでしょう position: relative 一緒に z-index. これは偶然ではありませんでした： z-index ルールは「配置された要素」でのみ機能します。

適用するのを忘れた position ルールは事実上無視します z-index ルール。

div {
  position: static | relative | absolute | sticky | fixed;
  z-index: 1;
}

兄弟の競争

もう1つの小さな注意点は z-index 兄弟のHTML要素間でのみ競合します。

2つのHTML要素が与えられると、深くネストされたHTML要素は、常に、より低いz-index値を持つネストされていないHTML要素とオーバーラップします。

これは、それを示すデモです z-index 兄弟のHTML要素間でのみ競合します。

<div class="blue">
  <div class="violet"></div>
  <div class="purple"></div>
</div>
<div class="green"></div>

.blue {
  position: relative;
  z-index: 2;
  background-color: blue;
}
.violet {
  position: relative;
  z-index: 4;
  background-color: violet;
}
.purple {
  position: relative;
  z-index: 1;
  background-color: purple;
}
.green {
  position: relative;
  z-index: 3;
  background-color: green;
  top: -4em;
}

HTML要素 div.violet オーバーラップします div.green より高いにもかかわらず z-index 価値！

まとめ

私たちが学んだことのいくつかを復習しましょう z-index:

• z-index z軸上に重なり合うレイヤーを作成できます！
• z-index 配置された要素でのみ機能します
• z-index 兄弟のHTML要素とのみ競合します

コンテンツを重ねると、面白いデザインができます！ うまくいけば、あなたはどのように良い考えを持っているでしょう z-index 動作し、ガイドラインのいくつかは、成功して使用できるようにします。