ホーム(記事一覧)へ

CSS positionにおけるleftやtopの解除方法

position:absoluteを使うと要素を任意の位置に動かすことができます。

しかし、スマホ対応するときに解除させたいときがありますよね?

CSS positionにおけるleftやtopの解除方法を解説します。

positionの解除方法はこちら↓

positionの基本はこちら↓

【結論】left:auto

leftに限らず、top,right,bottomも初期値はautoです。

解除する、つまり初期値に戻すには「auto」を指定しましょう。

下記はleftとrightを同じ値にしmargin:autoを指定したことで中央寄せした要素です。

absolute
<style>
.example{
    background: #f2f2f2;
    border: 1px solid #999;
    height: 100px;
    position: relative;
}
.example>div{
    position: absolute;
    /*コレ*/left: 10px;
    right: 10px;
    top: 10px;
    margin: auto;
    background: #ffff00;
    width: 50%;
    border: 1px solid #999;
    padding: 5px;
}
</style>
<div class="example">
    <div>absolute</div>
</div>

これの中央寄せを解除し右寄せにしたいとします。

【間違い例】left:0

下記は「left:10px」を「left:0」にした例です。

absolute

ほんの少し左によっただけで思った動きになっていません。

【成功例】left:auto

下記は「left:10px」を「left:auto」にした例です。

absolute

leftは解除され、topとrightだけ効いた状態になっています。

まとめ

CSS positionにおけるleftやtopの解除方法は「auto」

関連記事