CSS positionにおけるleftやtopの解除方法
2021年05月29日
position:absoluteを使うと要素を任意の位置に動かすことができます。
しかし、スマホ対応するときに解除させたいときがありますよね？
CSS positionにおけるleftやtopの解除方法を解説します。
positionの解除方法はこちら↓
positionの基本はこちら↓
【結論】left:auto
leftに限らず、top,right,bottomも初期値はautoです。
解除する、つまり初期値に戻すには「auto」を指定しましょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
例
下記は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」
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
