CSS

Cascading Style Sheets position property.

position

 positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。

Syntax


○○ {position: 値;}

 ○○にはセレクタが入ります。値には次の4つのどれかを指定します。

relative
相対配置にします。相対配置とは、通常の位置から相対的にずらして配置する方法です。後に続く要素の配置には影響を与えません。
absolute
絶対配置にします。絶対配置とは、ページ全体(html要素のボックス)を基準として、その上下左右からの距離で位置を指定する方法です。ただし、指定する要素が相対配置または絶対配置された要素に含まれている場合は、その要素のボックスが基準となります。絶対配置されたボックスはレイヤーのような状態となるため、後に続く要素は絶対配置されたボックスがなくなった状態で表示されます。
fixed
絶対配置にするだけでなく、ボックスをウィンドウに対して固定し、スクロールしても動かないようにします。この場合、位置指定の基準はウィンドウの表示領域になります。
static
初期値。通常の配置方法にします。

 例えば、class名が "test" の要素の相対的な位置を指定したいときには、


.test {position: relative;}

という書き方をします。

 positionプロパティで指定するのは、配置方法(基準位置)のみです。実際の表示位置の指定には、topプロパティ、bottomプロパティ、leftプロパティ、rightプロパティを併用して、基準位置からの距離を設定する必要があります。