【CSS】z-indexで重なり順を最前面にする方法
「position:absoluteを使っていたら他の要素の後ろになってしまった。最前面にもってきたい！」
というときの、z-indexなどでCSSで重なり順を最前面にする方法を紹介します。
「z-indexが効かない！」というかたはこちら↓
方法1.z-indexで大きい数値を指定する
z-indexは重なり順を指定するCSSプロパティです。数値が大きいほど前になります。
CSSのpositionとセットで使います。staticでは使えません。
例
以下のA,Bの要素はそれぞれposition:absoluteを指定しています。Aを最前面に出したいとします。
z-index指定前
<style>
.relative{
position: relative;
margin: 10px;
height: 200px;
border: 1px solid #999;
background: #f2f2f2;
}
.A,.B{
position: absolute;
top: 10px;
left: 10px;
width: 60%;
height: 100px;
text-align: center;
font-size: 150%;
color: #FFF;
font-weight: bold;
background: #b11818;
}
.B{
top: 50px;
left: 100px;
background: #3338b4;
}
</style>
<div class="relative">
<div class="A">A</div>
<div class="B">B</div>
</div>z-index指定後
<style>
.relative{
position: relative;
margin: 10px;
height: 200px;
border: 1px solid #999;
background: #f2f2f2;
}
.A,.B{
position: absolute;
top: 10px;
left: 10px;
width: 60%;
height: 100px;
text-align: center;
font-size: 150%;
color: #FFF;
font-weight: bold;
background: #b11818;
}
.B{
top: 50px;
left: 100px;
background: #3338b4;
}
</style>
<div class="relative">
<div class="A" style="z-index:10000/*コレ*/">A</div>
<div class="B" >B</div>
</div>右では要素Aに「z-index:10000」を指定しています。これで最前面に出ています。
z-indexは他のpositionにかかっている数値より大きければいいので、他のpositionのz-indexが指定されていないか0以下なら、1以上の値で最前面にできます。
逆に他の要素で「z-index:10000」を指定していたらこれより大きい数字を指定しないと最前面にはなりません。
また、0より小さい数値、つまりマイナス値を指定すると後ろに引っ込みます。意図的なものでない限り整数を指定しましょう。
z-indexの指定がうまくいかないときは下記の記事を参考にしてください。
z-indexの上限値は2147483647
「z-indexで大きい数字を指定って、具体的にいくらまでいいの？」
2,147,483,647です。21億です。
下記が証拠です。
Aに2147483647を指定（効いてる）
<div class="relative">
<div class="A" style="z-index:2147483647">A</div>
<div class="B" style="z-index:2147483646">B</div>
</div>1増やして、
Aに2147483648を指定（効かない）
<div class="relative">
<div class="A" style="z-index:2147483648">A</div>
<div class="B" style="z-index:2147483646">B</div>
</div>21億なんて値を指定することはありませんが、けっこう上限値高いとだけ覚えておきましょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
方法2.htmlを最後に記載する
positionに限らず要素が重なったとき、htmlの記述が下の行のものほど前列になります。
positionでz-indexを指定しない場合この法則が成り立ちます。
z-indexの値が同じ場合もこの法則です。
これを利用し、「ページトップへ戻る」のような下に固定させたい要素は</body>の直前に書くという手もあります。
</body>のあとは</html>しかないため、実質最後のhtmlタグであり、最前面になります。
ただし、z-indexが指定されるとその値が高いほうが前面にでます。
あくまでz-indexを指定しないならという前提での方法です。
【まとめ】CSSで重なり順を最前面にする方法
方法1：z-indexで大きい数字を指定
上限は2147483647ですが、せいぜい10000程度にしていおきましょう。もちろん1や2でもOKです。
方法2.htmlを最後に記載する
z-indexを指定しない、または同じ値のとき、htmlの記述が下の行のものほど手前に表示されます。
</body>の直前に書くと最前面に表示されます。
以上、z-indexなどで重なり順を最前面にする方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
