CSS position:absoluteのレスポンシブ・ずれるときの対応方法

position:absoluteは便利なもので要素を任意の位置に移動させることができます。

しかし、レスポンシブ対応が当たり前の今、その方法を知らずにpositionを使うとずれてしまうことがあります。

CSS position:absoluteのレスポンシブ・ずれるときの対応方法を解説します。

【レスポンシブ対応1】topやleftを%指定

レスポンシブ（スマホ版）でずれるのはpx指定しているからです。

レスポンシブなら％で指定しましょう。

topやleftは%で指定できます。このとき親の幅を100%とし位置を指定できます。

下記はleftを%指定した例です。ブラウザ幅を変えて確認してみてください。

<style>
.example2{
    background: #EEE;
    height: 200px;
    position: relative;
}
.example2>div{
    position: absolute;
    /*コレ*/left: 50%;
    bottom: 20px;
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example2">
    <div>position</div>
</div>

left:50%を指定しているのでブラウザ幅を変えても左から50%の位置をキープしています。

bottomはあえてpx指定しています。heightは高さがレスポンシブでも変わらないからということもありますし、下のほうに常に位置させたいからというのもあります。

【レスポンシブ対応2】メディアクエリで切り替える

@media(max-width:○○px){
    div{
        top:○○px;
        left:○○px;
    }
}

スマホ版へ切り替えるときメディアクエリを利用して一気に切り替えます。

ちょっとした装飾をpositon:absoluteで調整しているとき、%で指定するほうがかえってメンドウという場合があります。

スマホ版になったときの調整であればメディアクエリで切り替えてしまいましょう。

下記はメディアクエリで切り替える例です。ブラウザ幅を変えて確認してみてください。文字サイズが変わります。ほんの少しの違いですのでよく見比べてみてください。

ボタン

<style>
.example{
    position: relative;
    background: #3ba233;
    padding: 10px 0 10px 40px;
    box-sizing: border-box;
    display: block;
    width: 200px;
    color: #FFF;
}
.example::before{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg);
    position: absolute;
    left: 10px;
    top: 17px;
}
@media(max-width:1000px){
    .example{
        font-size: 85%;
    }
    .example::before{
        width: 8px;
        height: 8px;
        border-top: 2px solid #FFF;
        border-right: 2px solid #FFF;
        left: 12px;
        top: 15px;
    }
}
</style>
<a class="example">ボタン</a>

「@media(max-width:1000px)」は「ブラウザ幅が1000px以下」のときの指定です。

スマホに合わせて文字サイズを小さくすると矢印装飾の位置がずれたり違和感があったりします。

文字サイズが変わったタイミングで装飾位置なども調整しましょう。

上記はleftやtopの調整でしたが、スマホ版ではposition:absoluteを解除したいというときもメディアクエリが使えます。

【まとめ】position:absoluteのレスポンシブ・ずれるときの対応方法

ブラウザ幅が変わったとき横幅に合わせて位置を移動させたいなら

topやleftを%指定

ある地点でスマホ版に切り替えたいなら

メディアクエリで切り替える

以上、CSS position:absoluteのレスポンシブ・ずれるときの対応方法でした。