【CSS】position:absoluteで右寄せする方法

「position:absoluteで左寄せする方法はわかるけど右寄せする方法がわからない！」

position:absoluteで右寄せする方法を解説します。

positionの基本はこちら↓

【結論】right:0で右寄せ

leftで指定すると左を基準にしますが、rightで指定すると右を基準に位置を調整できます。

<style>
.example{
    position: relative;
    border: 1px solid #333;
    background: #c4f4e9;
    width: 50%;
    height: 50px;
}
.example>div{
    position: absolute;
    /*コレ*/right: 0;
    border: 1px solid #333;
    background: #ffa618;
}
</style>
<div class="example">
    <div>右寄せする要素</div>
</div>

left:100%で右から

%は親の幅を基準とします。left:100%を指定すると左を基準に親の幅分右にずらします。

これにより親要素の右端からスタートするように指定できます。

<style>
.example2{
    position: relative;
    border: 1px solid #333;
    background: #c4f4e9;
    width: 50%;
    height: 50px;
}
.example2>div{
    position: absolute;
    /*コレ*/left: 100%;
    white-space: nowrap;
    border: 1px solid #333;
    background: #ffa618;
}
</style>
<div class="example2">
    <div>右寄せする要素</div>
</div>

【右寄せできないとき】left:autoを指定する

right:0を指定しても右寄せできないときは、auto以外のleftを指定している可能性があります。

下記はright:0とleft:0両方を指定した例です。

<style>
.example3{
    position: relative;
    border: 1px solid #333;
    background: #c4f4e9;
    width: 50%;
    height: 50px;
}
.example3>div{
    position: absolute;
    right: 0;
    /*原因*/left: 0;
    width: 150px;
    border: 1px solid #333;
    background: #ffa618;
}
</style>
<div class="example3">
    <div>右寄せする要素</div>
</div>

leftを削除するかleft:autoで上書きするとright:0が効くようになります。

<style>
.example4{
    position: relative;
    border: 1px solid #333;
    background: #c4f4e9;
    width: 50%;
    height: 50px;
}
.example4>div{
    position: absolute;
    right: 0;
    /*原因*/left: 0;
    /*autoで上書き*/left: auto;
    width: 150px;
    border: 1px solid #333;
    background: #ffa618;
}
</style>
<div class="example4">
    <div>右寄せする要素</div>
</div>

【まとめ】position:absoluteで右寄せする方法

right:0で右寄せ

left:100%で右から

右寄せできないときはleft削除かleft:autoを指定する

以上、position:absoluteで右寄せする方法でした。