ホーム(記事一覧)へ

z-indexが効かない5つの原因と修正方法

position:absoluteを指定すると要素を自由な位置に指定することができます。そしてその要素が他の要素と重なったとき基本的に上に表示されます。

そんなとき「z-index」を指定すると重なり順を変更することができます。

「だというのに重なり順が変わらない!?z-indexが効いていない!?」というあなたのために「z-indexが効かない5つの原因と修正方法」を説明します。

原因1.他のz-indexより数値が小さい

z-indexは数値が大きいものほど上(手前)に表示されます。

z-indexを指定しても他のz-indexの数値より小さいと一番前には来ません。

解決方法:z-indexの数値を大きくする

とりあえずz-indexの数値を大きくして手前に来るか確認しましょう。

なお、z-indexの最大値は2147483647です。これを超えても効かなくなります。

原因2.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;」を指定しています。

意図通り上に表示することができました。

 

失敗例

他の要素A
absolute
他の要素B
<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>

成功例

他の要素A
absolute
他の要素B
<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>

原因3.子要素ではなく親要素に指定している

positionがかかっている子要素に対し親要素を上に重ねたいときの方法です。

原因1の方法を使って親要素を上に表示しようとしたのが左の「失敗例です。」
これではうまくいきません。

解決方法:子要素にマイナスを指定する

右の「成功例」では親から「z-index: 1;」を削除し、子に「z-index: -1;」を指定しました。

これで親要素が上に表示されます。

 

失敗例

親要素
absolute
<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>

成功例

親要素
absolute
<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>

原因4.親の兄弟要素が親より上に表示されている

positionがかかっている子要素を親の兄弟要素の上に重ねたいときの方法です。

親が親の兄弟要素より下に指定されていると子要素はそれより上に表示できません。

 

失敗例

親要素
absolute
親の兄弟要素
<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を削除する

親要素
absolute
親の兄弟要素
<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の数値を大きくする

親要素
absolute
親の兄弟要素
<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.子要素を親要素の兄弟要素にする

absolute
親要素
親の兄弟要素
<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>

親を超えられないのであればその親に依存しないように親から飛び出しましょう。

原因5.単位をつけている

z-indexに単位はいりません

z-index: 1px

↑単位があるため効かない

解決方法:単位をなくし数値だけにする

z-index: 1

↑単位がないため効く

失敗例

他の要素A
absolute
他の要素B
<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>

成功例

他の要素A
absolute
他の要素B
<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.他のz-indexより数値が小さい

z-indexの数値を大きくしてみましょう。

原因2.positionを指定していない

position:relativeを指定しましょう。

原因3.子要素ではなく親要素に指定している

子要素にマイナスを指定しましょう。

原因4.親の兄弟要素が親より上に表示されている

z-indexを使わないか親を上位にするか親から兄弟要素に変更しましょう。

原因5.単位をつけている

単位を削除しましょう。

 

以上、z-indexが効かない5つの原因と修正方法でした。

関連記事