HTMLのスタイルのpositionプロパティ【現役エンジニアが解説】
今回は、HTMLのスタイルのpositionプロパティについて、相対位置と絶対位置に分け、簡単に解説していきます。
通常の位置基準の相対位置の指定
positionプロパティをrelativeにすると、通常の位置を基準に相対位置を指定できます。
topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで相対位置を指定します。
<div style="width:200px;height:200px;">
<span style="position:relative;top:20px;left:20px;">ほげ</span>
</div>
上記のコードでは、spanタグが通常配置される位置から下に20ピクセル、右に20ピクセル移動されます。
親要素位置基準の絶対位置の指定
positionプロパティをabsoluteにすると、親要素の位置を基準に絶対位置を指定できます。
topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで絶対位置を指定可能です。
<div style="width:200px;height:200px;position:relative;">
<span style="position:absolute;top:20px;right:20px;">ほげ</span>
</div>
上記のコードでは、spanタグが親要素の上端から下に20ピクセル、右端から左に20ピクセルの位置に移動されます。
ウィンドウ基準の絶対位置の指定
positionプロパティをfixedにすると、ウィンドウを基準に絶対位置を指定することができます。
絶対位置は、topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで指定できます。
<div style="width:200px;height:200px;position:fixed;top:0;right:0;"></div>
上記のコードでは、divタグがウィンドウの上端から下に0ピクセル、右端から左に0ピクセルの位置に固定表示されます。