マンガでわかるホームページ作成

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

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

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

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

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

z-indexはstatic以外のpositionとセットで使います。位置移動させない要素の場合は「position:relative」を指定しましょう。

 

下記の例は「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>

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

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>

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

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>

 

修正方法はいくつかあります。

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>

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

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

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

失敗例

他の要素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の記述ミスなど

他には単純ミスなども考えられます。

下記の記事を参考にミスがないか確認してみてください。

まとめ

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

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

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

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

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

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

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

単位を削除しましょう。

 

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

関連記事