この記事では、z-index CSSプロパティの使用方法について学習します…CSSで3次元に侵入する唯一の方法です！
CSSを使用してスタイルを設定する場合、ほとんどの場合、CSSは2D平面上にあります。 HTML要素は、テトリスの積み重ねブロックのように、ページ上に水平/垂直に配置されます。 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デザインについて考えるための異なる方法を導入するための小さな方法です。
マイナーな警告
あなたが鋭い目を持っているなら、あなたはおそらく以前のコードスニペットがz-indexと一緒にposition: relativeを使用していることに気づいたでしょう。 これは偶然ではありませんでした。z-indexルールは「配置された要素」でのみ機能します。
positionルールの適用を忘れると、z-indexルールは事実上無視されます。
div {
position: static | relative | absolute | sticky | fixed;
z-index: 1;
}
配置要素は、相対、絶対、固定、またはスティッキーのいずれかのHTML要素です。 基本的に、それは静的以外のものです。
兄弟の競争
もう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は、z-indexの値が高いにもかかわらず、div.greenとオーバーラップします。
z-indexの値は、正/負の整数である必要があります。 これは、無制限のz軸レイヤーを持つことができるという意味ではありません！ 最大範囲は±2147483647です。
CSSコードベースでは、多くの場合、999、9999、または99999のz-index値が表示されます。 これは、要素が常に一番上にあることを確認するためのおそらく怠惰な方法です。 複数の要素を上に置く必要がある場合、将来的に問題が発生する可能性があります。 ほとんどの場合、ニーズには1または2のz-indexで十分であることがわかります。
まとめ
z-indexについて学んだことのいくつかを確認しましょう。
z-indexは、z軸上に重なり合うレイヤーを作成できます。z-indexは、配置された要素でのみ機能しますz-indexは兄弟のHTML要素とのみ競合します
コンテンツを重ねると、面白いデザインができます！ z-indexがどのように機能するか、およびいくつかのガイドラインを理解して、成功裏に使用できるようになったことを願っています。
z-indexプロパティの詳細なドキュメントについては、MDNにアクセスしてください。
