【CSS初心者向け】z-indexで重ね合わせを指定する方法 | WEBCAMP NAVI
【7月枠も残りわずか】転職保証コース

【CSS初心者向け】z-indexで重ね合わせを指定する方法

皆さんはCSS(カスケーディングスタイルシート)のz-indexプロパティについてどれほど理解していますか?

CSSを使ってホームページなどを作っていく中で、多くの方がz-indexプロパティを使って「要素の重なりの指定」を行うと思います。

CSSを使って作業する中で、z-indexの利用は必須になります。

しかし、z-indexをしっかり理解できてない方や、使い方がいまいち分からないという方は意外と多いですよね。

そこで今回は、z-indexの内容から使い方まで詳しく説明していきます!

CSSのz-indexとは?

「CSS」 はサイトの「デザイン」や「レイアウト」を決定する言語です。

そしてCSSの中での重要なキーワードが「z-index」です。

z-indexは重なりを作るワード

「z-index」とは、ボックスの重なりの順序を指定するワードです。

それぞれの要素に値を決めて、その値の大きさによって要素の配置を決めることができます。

基本的には、値が大きい要素ほど前面にきます。

また、z-indexを使うことは、一見簡単そうに見えるかもしれません。

しかし、いくつかのルールに沿ってコーディングしないと、イメージと異なる出力結果が出てしまいます。

必ずしも「z-indexの値を最大にすれば要素が一番前にくる!」とはならないんです……

z-indexの指定値について

次にz-indexで指定できる値の種類と範囲について解説します。

指定値は2種類ある!

z-indexの指定値は「auto」と「整数値」の2種類があります。

positionプロパティの初期値(static)以外の値が指定されている要素には、自動的に「auto」が適用された状態になっています。

z-indexに auto”が指定されている場合や、自動的に適用された状態の場合、要素の重なり方が、文書のソース内であとに記述されている要素ほど上に重ねられて前面に表示します。

また、重なり順序を整数値で指定する事も出来ます。

整数値は、0を基準として、-2147483647から2147483647までの値を指定できます。

次に、z-indexに深く関係するpositionプロパティの仕様を確認しましょう。

Positionプロパティについて

positionプロパティは、ボックスの基準の位置を、相対位置か絶対位置なのかを指定する際に使用します。

要素の表示位置の指定には、top・bottom・left・rightプロパティを併用し、指定した基準位置からの距離を設定することが出来ます!

Positionプロパティの種類と使い方

解説
static 初期値。配置方法を指定。
relative 相対位置への配置。
absolute 絶対位置への配置。absoluteを指定した親ボックスにstatic以外の値が指定されている場合に、その親ボックスの左上が基準位置になります。親ボックスに指定がない場合は、body要素が起点となります。
fixed absoluteと同じく絶対位置への配置になります。画面をスクロールした際も位置が固定されたままになります。
sticky  relativeのように位置が指定され、fixedのように固定されます。

absolute、relative、fixed、stickyなどの要素は、デフォルトのstaticな要素よりも、記述順番に関係なく手前に出力されることを覚えておいて下さい!

また、 staticな要素を、そうでない要素よりも上に表示したい場合、 z-indexに負の値を指定することで表示することができます。

Positionプロパティについてさらに知りたい方は下の記事もご覧ください。

【徹底解説】cssのpositionとは?absoluteやfixedの方法と使用例を紹介

z-indexが効かない時の注意点

z-indexが効かない時に確認して欲しいことが以下の3つの点です。

初期値のstatic要素には使えない z-indexを使うときは、positionの値にstatic以外の値が入っていないと使うことができません。
出現順になっているのか確認 同じコンテンツ内で積み重なっている要素は出現順に表示され、後の要素は前の要素の上に表示されます。
新しいプロパティを使用したか opacityやtransformなどのプロパティを設定すると、要素は新しい積み重ねコンテキストに配置されることに注意。

z-indexが効かない、もしくはズレた出力が出てしまうという時は、これらの注意点を確認してみましょう。

スタック文脈とスタックレベル

スタック文脈(stacking contexts)スタックレベル(stack level)という概念は、z-indexを扱う上でとても重要なものです。

今回の解説でしっかり理解していきましょう。

スタック文脈について

スタック文脈は、「特定の要素を元にした子孫要素のグループ」を表します。

HTML要素は初期状態でルートスタック文脈を生成していますので、全ての要素は何らかのスタック文脈に所属していることになります。

スタック文脈を構成する「特定の要素」はいくつかありますが、例を挙げると「position が static 以外かつ z-index が “auto”以外」 などがあります。

これは「z-indexを有効にした要素はスタック文脈を生成する」ということです。

また、要素自体のz-indexが大きくても、階層グループ(スタック文脈)のz-indexが小さい場合は後ろに表示されるので注意してくださいね。

スタックレベルはz-indexの値

スタックレベルとはz-index の値のことを表し、要素の重なる順番を表すプロパティです。

これは所属するスタック文脈内での順番を指定するものです。

z-indexの値が同じでも、スタックコンテキストによって重なり順序が変わることがあります。

なので、スタック文脈とスタックレベルを意識してスタイルを書きましょう!

終わりに

今回のz-indexの説明はどうだったでしょうか?

z-indexが使いこなすことが出来れば、CSSで行える作業の幅も大きく広がります。

CSSで何かを作っていく中でz-indexの役割はとても重要ですので完璧に使いこなせるようにしましょう!

さらにCSSや他のプログラミング言語を使いこなせるようになりたいという方には、プログラミングスクールに通ってみることをオススメします

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 12019年4月時点