z-indexがイマイチよくわからない!?

 

今回は「z-index」にフォーカス！なんやかんや「z-indexがイマイチよくわからない!?」って人向けです。

 

簡単に言ってしまえば、z-indexプロパティは、要素の重なりの順序を指定することができます。

一般的にはhtmlコード上の後ろに記述したものが画面上では手前に表示されますが、z-indexプロパティの値に指定する“ 数値の数が大きいほど手前に、小さいほど奥に ”表示されるようになります。ちなみにこれをスタックレベル(stack level)と呼ぶようです。

この「z-index」の「z」は、3次元空間で遣われる、x方向,y方向,z方向の「z」で前後関係を意味しています。

z-indexの初期値はautoで、何も指定しない初期値(=auto)の場合その親要素と同じ階層に自動的になる。そして、重なる順序をauto=0を基準として整数で指定していきます。

 

▼簡単な例を見みながら確認していきましょう。

デモサンプル

 

1.z-index関係なしで要素を並べてみる

まずは、単純に3つの<div>要素をz-indexを何も指定しないで並べてみます。
使用する画像は以下の3つです。

box1.png	box2.png	box3.png

1-1.共通のCSS

 1-2.HTML

 1-3.CSS

 すると縦横100pxの角丸の正方形要素が横に並ぶようになります。

 

 

2.z-index関係なしで要素をとりあえず重ねてみる

前述のサンプルで「BOX2、BOX3」だけど、左に「margin-left:-20px」ずらしてみる。

2-1.HTML

 2-2.CSS

 すると「BOX1」はそのままで「BOX2,BOX3」が左に20pxずつずれます。

その際に、重なる順は後に記述されているものほど手前に表示されるので奥から「BOX1→BOX2→BOX3」になりますね。

 

3.position:relative;かつindex値を指定する

さらに、それぞれのボックス要素に対してpositionプロパティに対しrelativeを指定し、さらにそれぞれ違ったz-index値を指定してみましょう。

ここで指定するのは以下の通りです。

BOX1…z-index指定なし(デフォルト値=auto)
BOX2…z-index:3
BOX3…z-index:2

 

3-1.CSS

 するとz-index値の一番大きな要素「BOX2」が一番手前に表示されるようになり、その次に「BOX3」、その次に「BOX1」という順になります。

 

4.入れ子の場合

次にそれぞれの要素を入れ子にした場合も見ていきましょう。

ここで指定するのは以下の通りです。

big_box…z-index指定なし(デフォルト値=auto)
small_box1…z-index:3
small_box2…z-index:2
small_box3…z-index:1
small_box4…z-index:-1

 

4-1.HTML

 4-2.CSS

 すると、z-index値の大きな順「small_box1(z-index=3)」→「small_box2(z-index=2)」→「small_box3(z-index=1)」→「big_box(z-index=auto)」→→「small_box4(z-index=-1)」となります。

 

 

5.リンクありの場合

単純に考える通り、上に表示される要素が優先させるので、他の要素と重なってしまったエリアのリンクは認識されません。「BOX1、BOX3」にリンクあり「BOX2」はリンクなしで配置してみます。

5-1.HTML

5-2.CSS

 すると一番手前に表示されるのは「BOX2(リンクなし)」になりますが、その左右に配置してある「BOX1(リンクあり)、BOX3(リンクあり)」にカーソルを合わせると、リンクが貼ってあるのがわかると思いますが、「BOX2」と重なる部分は、手前にある「BOX2」が優先されてリンクは切れていることがわかります。

このように、任意の要素を配置する前後関係は「z-index」を扱って指定をしていきます。

z-indexって何なの？って疑問を抱いていた方の解決になればいいのですが…。