HTMLのスタイルのpositionプロパティ【現役エンジニアが解説】

PROGRAM

今回は、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ピクセルの位置に固定表示されます。