z-indexで重なり順を指定してるのに、ぜんぜん効かないよ
z-indexを効かせるには、z-indexの仕組みと特徴を理解すれば大丈夫だよ。
ｚ－index に 「position」が指定されていない
まず確認してもらいたいのがこちらです。
ｚ－index が使用できるのは、 position要素の下記が指定されている要素になります。
- position: relative;
- position: absolute;
- position: fixed;
- position: sticky;
試しに下記の４つのブロックをご覧ください。
４つのブロックには上からそれぞれ、sticky、absolute、relative、fixedを指定しています。
しっかり、想定通りの順番に並んでますね。
<p class="Z-index4">z-index4</p>
<p class="Z-index3">z-index3</p>
<p class="Z-index2">z-index2</p>
<p class="Z-index1">z-index1</p>/* それぞれのブロックのスタイル（見た目に関してのスタイルは省略） */
.Z-index4 {
position: sticky;
z-index: 4;
}
.Z-index3 {
z-index: 3;
position: absolute;
}
.Z-index2 {
z-index: 2;
position: fixed;
}
.Z-index1 {
z-index: 1;
position: relative;
}ここで、一番上になっている「Z-index4」ブロックの「position」を削除してみます。
/* position: sticky;を削除 */
.Z-index4 {
z-index: 4;
}その結果がこちら。
positionを削除した、「z-index: 4」が下になりました。
このように「z-index」プロパティを効かすには、「position」が必須です。
absoluteやfixedを使用するとレイアウトが崩れちゃうので、とりあえず聞かせたい場合は「position: relative;」を指定するといいよ。
親要素にも「z-index」が指定されている
次に多いのはこちらの原因でしょう。
親要素にも「z-index」が指定されている場合には注意が必要です。
さっそく下記の例を見てください。
<div class="Z-index1">
<p class="Z-index3">z-index3</p>
</div>
<p class="Z-index2">z-index2</p>.Z-index3 {
position: relative;
z-index: 3;
}
.Z-index1 {
position: relative;
z-index: 1;
}
.Z-index2 {
position: relative;
z-index: 2;
}「z-index3」のブロックが「z-index2」のブロックより下になっています。
ここでもう一度コードを見ると、「z-index3」の親要素に「z-index1」が指定されています。
<div class="Z-index1">
<p class="Z-index3">z-index3</p>
</div>
<p class="Z-index2">z-index2</p>親要素にレベルの低い「z-index」が指定されてるよ。
その場合子要素にレベルの高い「z-index」が指定されていても、親要素より高い位置に来ることはないよ。
今は 「z-index3」の親要素に「z-index1」が指定されているため、
親要素の「z-index1」ごと、下になってしまいました。
逆に、親要素に高いレベルの「z-index」が指定されていれば。。
「z-index1」が指定されている子要素ごと、上に来るよ。
z-indexが効かない場合、親要素、兄弟要素の「z-index」の値を確認してみよう。
親要素にも「z-index」が指定されてる場合の対策
親要素にレベルの高い「z-index」を指定する
親要素に高い位置に来るように「z-index」を指定する方法。
当然、「Z-index3」が上に来るようになります。
もしくは親要素の「z-index」を削除しても、解決します。
.Z-index3 {
position: relative;
z-index: 3;
}
.Z-index1 {
position: relative;
z-index: 3;
}
.Z-index2 {
position: relative;
z-index: 2;
}
兄弟要素に変更する
「z-index3」と「z-index2」を兄弟要素にしても解決します。
タグ構成が変わるのであまり現実的ではないかもしれませんが。。。
<div class="Z-index1">
<p class="Z-index3">z-index3</p>
<p class="Z-index2">z-index2</p>
</div>以上、z-indexが効かない場合に確認する項目でした。
効かないあるあるとして、「of-type」が効かない場合の対策もあるよ。
こっちも参考にしてね。
