重なりの順序を指定するz-indexについて
z-indexとは重なりの表示順序を指定するものです。前提条件としてpositionをrelative、absolute、fiexedに指定している要素のみz-indexを利用できます。
つまりpositionの初期値staticではz-indexを利用できないので、明示的にpositionをrelative、absolute、fiexedのいずれかにする必要があります。
非常にposisionプロパティと関連度が高いのでpositionのページをご確認下さい。
また、z-indexは重なる要素に透明度を指定するrgba()と併せてよく利用されます。
z-indexのプロパティ
z-index値 | 説明 |
Auto(初期値) | この場合、後に書かれた要素が上(前面)に表示されます。 |
整数 | 整数の値が大きいほど上(前面)に表示されます。例えばz-index:10;とz-index:20;を指定した要素の場合、z-index:20;の方が上になります。 |
z-indexの利用例
結果
HTML
CSS
-
親要素子要素(前)
z-index:20;子要素(後)
z-index:10; -
/* HTMLの例 */
親要素子要素(前)
z-index:20;子要素(後)
z-index:10; -
/* CSSの例 */ .parent1_1 { position:relative; height:100px; margin:5px; padding:5px; background:aliceblue; border:1px solid lightgray; text-align:center; } .child1_1 { display:inline-block; position:relative; z-index:20; width:100px; height:70px; margin:5px; padding:5px; background: orange; left:15px; } .child1_2 { display:inline-block; position:relative; z-index:10; width:100px; height:70px; margin:5px; padding:5px; width:100px; height:70px; background: skyblue; top:10px; left:-15px; }
z-indexの大きい子要素が前に表示されます。
rgba()を利用して透明度も設定
結果
HTML
CSS
-
親要素子要素(前)
z-index:20;子要素(後)
z-index:10; -
/* HTMLの例 */
親要素子要素(前)
z-index:20;子要素(後)
z-index:10; -
/* CSSの例 */ .parent2_1 { position:relative; height:100px; margin:5px; padding:5px; background:aliceblue; border:1px solid lightgray; text-align:center; } .child2_1 { display:inline-block; position:relative; z-index:20; width:100px; height:70px; margin:5px; padding:5px; background: rgba(247,151,34,.5); left:15px; } .child2_2 { display:inline-block; position:relative; z-index:10; width:100px; height:70px; margin:5px; padding:5px; width:100px; height:70px; background: rgba(47,185,226,.5); top:10px; left:-15px; }
親要素を子要素より前にする方法
失敗例
結果
HTML
CSS
-
親要素(一番前にしたい)z-index:30;子要素(前)
z-index:20;子要素(後)
z-index:10; -
/* HTMLの例 */
親要素(一番前にしたい)z-index:30;子要素(前)
z-index:20;子要素(後)
z-index:10; -
/* CSSの例 */ .parent3_1 { position:relative; z-index:30; height:100px; margin:5px; padding:5px; background: rgba(234,245,247,.5); border:1px solid lightgray; text-align:center; } .child3_1 { display:inline-block; position:relative; z-index:20; width:100px; height:70px; margin:5px; padding:5px; background: orange; left:15px; } .child3_2 { display:inline-block; position:relative; z-index:10; width:100px; height:70px; margin:5px; padding:5px; width:100px; height:70px; background: skyblue; top:10px; left:-15px; }
親要素に子要素より大きいz-indexを指定していますが前に表示されません。
成功例
結果
HTML
CSS
-
親要素(一番前にしたい)子要素(前)
z-index:-10;子要素(後)
z-index:-20; -
/* HTMLの例 */
親要素(一番前にしたい)子要素(前)
z-index:-10;子要素(後)
z-index:-20; -
/* CSSの例 */ .parent4_1 { position:relative; height:100px; margin:5px; padding:5px; background: rgba(234,245,247,.5); border:1px solid lightgray; text-align:center; } .child4_1 { display:inline-block; position:relative; z-index:-10; width:100px; height:70px; margin:5px; padding:5px; background: orange; left:15px; } .child4_2 { display:inline-block; position:relative; z-index:-20; width:100px; height:70px; margin:5px; padding:5px; width:100px; height:70px; background: skyblue; top:10px; left:-15px; }
親要素にz-indexを指定しない。子要素のz-indexにマイナス値を設定する。以上の条件を満たすと親要素を子要素の前にすることが出来ます。
ただし、透明度は反映できません。このため子要素を隠したい時に使える程度でしょうか。