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

CSSで要素を最前面へ表示させる方法

「position:absoluteを使っていたら他の要素の後ろになってしまった。最前面にもってきたい!」

というときのCSSで要素を最前面に表示させる方法を紹介します。

結論:z-indexを使う

z-indexは重なり順を指定するCSSプロパティです。数字が大きいほど前になります。

CSSのpositionとセットで使います。

以下のA,Bの要素はそれぞれposition:absoluteを指定しています。Aを最前面に出したいとします。

z-index指定前

A
B
<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指定後

A
B
<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にかかっている数値より大きければいいので10000でなくても1でも最前面になることがあります。

逆に他の要素で「z-index:10000」を指定していたらこれより大きい数字を指定しないと最前面にはなりません。

z-indexの指定がうまくいかないときは下記の記事を参考にしてください。

 

以上、CSSで要素を最前面に表示させる方法でした。

関連記事