CSSのz-indexの使い方

CSSの「z-index」は、重なりを変更するためのプロパティです。Y軸は縦方向、X軸は横方向ですが、Z軸は重なりを表しています。

<div class="kasanari">
<div class="blue">青</div>
<div class="purple">紫</div>
<div class="green">緑</div>
</div>

例えばこのようなHTMLがあるとします。

positionプロパティなどで要素を動かした場合、要素同士を重ねることができます。HTMLでは後から書いたものが上に来ますので、そのままでは「青⇒紫⇒緑」の順に重なっていきますが、z-indexを使うことで、この重なりの関係を変えることができます。

.kasanari {
    position: relative;
    z-index: 0;
    height: 250px;
    width: 500px;
}
.blue{
   position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3;
    height: 120px;
    width: 200px;
}
.purple{
    position: absolute;
    top: 75px;
    left: 130px;
    z-index: 2;
    height: 120px;
    width: 200px;
}  
.green{
    position: absolute;
    top: 100px;
    left: 200px;
    z-index: 1;
    height: 120px;
    width: 200px;
}

例えばこのようにすることで、それぞれの位置は変わりませんが、重なりが変わり青が一番上に来ました。それぞれの要素に背景画像を設定していた場合、z-indexによって見える部分が全然変わってくることになります。

それぞれの要素をリンクにした場合、青は全ての部分がクリック出来ますが、紫と緑のクリックできる範囲は網目がかかっている部分になります。

今回は3つの要素で解説しましたが、5つでも8つでも好きなだけ要素を重ねて順番を変えることもできます。

z-indexのルール

  • positionプロパティで、relative、absolute、fixedのいずれかを指定する
  • z-indexの値は、「整数」または「auto」
  • 整数の値が大きいほど上に行く

position: staticではz-indexが使えません。positionプロパティで relative、absolute、fixedのいずれかを指定すると、z-indexは自動的にautoが指定された状態になります。

autoを指定すると、プロパティの指定がない場合と同じように、通常の順番の重なりになります。auto同士の重なりは、後に書いた要素が上に表示されます。基本的には整数を指定すると覚えておきましょう。-1や-2といった負の値を使うこともできます。

画像置き換えにz-indexが使える?

CSSの画像置き換えでテキストリンクを非表示にしたり、外に飛ばしたりする手法があります。「display:none」や「text-indent:-9999px;」が良く使われますが、これをz-indexでも実現できそうな気がしますよね。

しかし、z-indexでテキストを下に回り込ませた場合、リンク(aタグ)自体も下に回りこんでしまうため、その部分をクリックできなくなってしまいます。display:noneはaタグをそのままに、テキストのみを非表示にすることができますが、z-indexでは全ての要素が下に行ってしまうためクリックできないのです。

なお、画像置き換えをする際に、「display:none」と「text-indent:-9999px;」のどちらが良いのかということですが、どちらでも大丈夫です。隠しテキストは検索エンジンからペナルティを受けるという話もありますが、正しい使い方をしている限りペナルティを受けることもありません。(text-indent-9999pxによる画像置換えと隠しテキスト

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ