z-indexが効かない6つの原因と修正方法
position:absoluteを指定すると要素を自由な位置に指定することができます。そしてその要素が他の要素と重なったとき基本的に上に表示されます。
そんなとき「z-index」を指定すると重なり順を変更することができます。
「だというのに重なり順が変わらない!?z-indexが効いていない!?」というあなたのために「z-indexが効かない6つの原因と修正方法」を説明します。
目次
原因1.positionを指定していない
z-indexはstatic以外のpositionとセットで使います。
positionを指定していないと要素の前後順を変更できません。
解決方法：position:relativeやposition:absoluteを合わせて指定する
位置移動させない要素の場合は「position:relative」を指定しましょう。
「position:static」では効かないので注意です。
下記の例は「absolute」の要素に「position:absolute」を指定しています。
そのうえで「他の要素A」を「absolute」より上に重ねようとして「z-index:1」を指定しました。
しかし、左の「失敗例」では効いていません。
右の「成功例」では「他の要素A」に「z-index: 1;position:relative;」を指定しています。
意図通り上に表示することができました。
失敗例
<style>
.kijun{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
}
.kijun div{
width: 100px;
border: 1px solid #999;
background: #e6bba0;
padding: 10px;
margin: 10px;
}
.kijun .absolute{
position: absolute;
left: 50px;
top: 40px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
}
</style>
<div class="kijun">
<div style="z-index: 1;">他の要素A</div>
<div class="absolute">absolute</div>
<div>他の要素B</div>
</div>成功例
<style>
.kijun{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
}
.kijun div{
width: 100px;
border: 1px solid #999;
background: #e6bba0;
padding: 10px;
margin: 10px;
}
.kijun .absolute{
position: absolute;
left: 50px;
top: 40px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
}
</style>
<div class="kijun">
<div style="z-index: 1;position:relative;/*コレ*/">他の要素A</div>
<div class="absolute">absolute</div>
<div>他の要素B</div>
</div>
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
原因2.効かない数値を指定している
z-indexに指定できる数値は下記のとおりです。
- 整数（マイナス値含む）
- 範囲は-2147483647～2147483647
数値を小数点で指定していないか、2147483647以上になっていないか確認しましょう。
原因3.他のz-indexより数値が小さい
z-indexは数値が大きいものほど上（手前）に表示されます。
z-indexを指定しても他のz-indexの数値より小さいと一番前には来ません。
解決方法：z-indexの数値を大きくする
とりあえずz-indexの数値を大きくして手前に来るか確認しましょう。
なお、z-indexの最大値は2147483647です。これを超えても効かなくなります。
原因4.子要素ではなく親要素に指定している
positionがかかっている子要素に対し親要素を上に重ねたいときの方法です。
原因1の方法を使って親要素を上に表示しようとしたのが左の「失敗例です。」
これではうまくいきません。
解決方法：子要素にマイナスを指定する
右の「成功例」では親から「z-index: 1;」を削除し、子に「z-index: -1;」を指定しました。
これで親要素が上に表示されます。
失敗例
<style>
.kijun1{
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
height: 50px;
position: relative;
z-index: 1;
}
.absolute1{
position: absolute;
left: 40px;
top: 10px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
}
</style>
<div class="kijun1">
親要素
<div class="absolute1">absolute</div>
</div>成功例
<style>
.kijun2{
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
height: 50px;
position: relative;/*あってもなくてもいい*/
/*z-index: 1;削除*/
}
.absolute2{
position: absolute;
left: 40px;
top: 10px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
z-index: -1;/*コレ*/
}
</style>
<div class="kijun2">
親要素
<div class="absolute2">absolute</div>
</div>原因5.親の兄弟要素が親より上に表示されている
positionがかかっている子要素を親の兄弟要素の上に重ねたいときの方法です。
親が親の兄弟要素より下に指定されていると子要素はそれより上に表示できません。
失敗例
<style>
.kijun3,.brother{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
height: 50px;
z-index: 1;
}
.absolute3{
position: absolute;
left: 40px;
top: 100px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
z-index: 3;
}
</style>
<div class="kijun3">
親要素
<div class="absolute3">absolute</div>
</div>
<div class="brother">親の兄弟要素</div>
解決方法：z-indexを使わないか親を上位にするか親から兄弟要素に変更する
解決方法はいくつかあります。
1.親またはその兄弟またはその両方のz-indexを削除する
<style>
.kijun4,.brother4{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
height: 50px;
/*z-index: 1;削除*/
}
.absolute4{
position: absolute;
left: 40px;
top: 100px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
z-index: 3;
}
</style>
<div class="kijun4">
親要素
<div class="absolute4">absolute</div>
</div>
<div class="brother4">親の兄弟要素</div>z-indexを指定しなくていいなら削除しましょう。
2.親をその兄弟よりz-indexの数値を大きくする
<style>
.kijun5,.brother5{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
height: 50px;
z-index: 1;
}
.absolute5{
position: absolute;
left: 40px;
top: 100px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
z-index: 3;
}
</style>
<div class="kijun5" style="z-index: 2/*コレ*/">
親要素
<div class="absolute5">absolute</div>
</div>
<div class="brother5">親の兄弟要素</div>親ごと上に表示させましょう。
3.子要素を親要素の兄弟要素にする
<style>
.kijun6,.brother6{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
height: 50px;
z-index: 1;
}
.absolute6{
position: absolute;
left: 40px;
top: 100px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
z-index: 3;
}
</style>
<div style="position: relative;">
<div class="absolute6">absolute</div>
</div>
<div class="kijun6">
親要素
</div>
<div class="brother6">親の兄弟要素</div>親を超えられないのであればその親に依存しないように親から飛び出しましょう。
原因6.単位をつけている
z-indexに単位はいりません
z-index: 1px
↑単位があるため効かない
解決方法：単位をなくし数値だけにする
z-index: 1
↑単位がないため効く
失敗例
<style>
.kijun7{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
}
.kijun7 div{
width: 100px;
border: 1px solid #999;
background: #e6bba0;
padding: 10px;
margin: 10px;
}
.kijun7 .absolute7{
position: absolute;
left: 50px;
top: 40px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
}
</style>
<div class="kijun7">
<div style="z-index: 1px/*pxなどの単位は不要*/;position:relative;">他の要素A</div>
<div class="absolute7">absolute</div>
<div>他の要素B</div>
</div>成功例
<style>
.kijun7{
position: relative;
width: 90%;
border: 1px solid #999;
background: #f2f2f2;
padding: 15px;
}
.kijun7 div{
width: 100px;
border: 1px solid #999;
background: #e6bba0;
padding: 10px;
margin: 10px;
}
.kijun7 .absolute7{
position: absolute;
left: 50px;
top: 40px;
width: 100px;
border: 1px solid #999;
background: #a0c6e6;
padding: 10px;
}
</style>
<div class="kijun7">
<div style="z-index: 1;position:relative;">他の要素A</div>
<div class="absolute7">absolute</div>
<div>他の要素B</div>
</div>その他：CSSの記述ミスなど
他にはCSSの優先度のミスや記述ミスなども考えられます。
下記の記事を参考にミスがないか確認してみてください。
まとめ
原因1.positionを指定していない
position:relativeを指定しましょう。
原因2.効かない数値を指定している
数値を小数点で指定していないか、2147483647以上になっていないか確認しましょう。
原因3.他のz-indexより数値が小さい
z-indexの数値を大きくしてみましょう。
原因4.子要素ではなく親要素に指定している
子要素にマイナスを指定しましょう。
原因5.親の兄弟要素が親より上に表示されている
z-indexを使わないか親を上位にするか親から兄弟要素に変更しましょう。
原因6.単位をつけている
単位を削除しましょう。
以上、z-indexが効かない6つの原因と修正方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
