戻る

positionプロパティとは

positionプロパティとは

positionは、指定した要素の配置方法を指定するためのプロパティです。

キーワード:static

初期値。通常配置を意味します。

キーワード:relative

相対的な配置を意味します。通常の位置を基準とし、そこから相対的に見た位置を指定して配置することができます。relativeに指定された元の位置から移動している要素(要素Aとします)に後続する要素は、要素Aの移動に影響を受けることなく配置されます。

キーワード:absolute

絶対的な位置を意味します。基本はhtml全体(body)の左上を基準位置とし、そこからの絶対位置を指定して配置することができます。親ボックスにpositionプロパティのstatic以外が指定されている場合は、基準位置が親ボックスの左上に変わります。絶対位置を行った要素(要素Bとします)の前後の要素は、要素Bを存在しないものとして扱うため、要素Bが配置されていた元の場所を詰めて配置されます。これはたとえ要素Bが移動していない場合も同様です。

キーワード:fixed

固定位置を意味します。配置位置の基準は常にウインドウの表示領域となり、固定配置された要素は画面に固定されて、スクロールしても動かななくなります。

上下左右からの位置指定について

positionプロパティの値がstatic以外の場合、具体的な位置指定のために、top・bottom・left・rightの4つのプロパティを設定できます。

数値:単位つきの実数

実数にはemやpxなどの単位をつけて距離を指定します。

数値:%

実数に半角の%をつけて距離を指定します。

相対配置の場合は、指定した要素を含むブロックレベル要素の幅または高さに対する割合になります。

絶対配置の場合は、基準となるボックスの幅または高さに対する割合になります。

キーワード:auto

状況に応じて自動的に設定されます。

inserted by FC2 system