HTML・CSSリファレンス

CSSで配置方法・位置を指定する（position）

要素の配置方法を指定するにはpositiopnプロパティを使います。生成内容・ルート要素（html要素）には適用できません。

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

指定できる値

プロパティ:値	説明
position: static	配置方法を指定しない この値のときには、top、right、bottom、leftは適用されない これが初期値（デフォルト）となる
position: relative	まず通常レイアウトされるべき位置を計算され（通常位置） その通常位置から相対的に配置される この位置を相対位置という
position: absolute	絶対配置になる 親ボックスのpositiopnプロパティの値がstatic以外の場合はその親ボックスの左上が基準となる 親ボックスのpositiopnプロパティの値がstaticの場合はウィンドウ全体の左上が基準となる 兄弟（隣接）要素はその要素がないもののように振舞う
position: fixed	固定配置（絶対配置の一種） ウィンドウ全体の左上が基準となる スクロールしても位置は固定される IEではIE 7からサポートされました。他ブラウザでは既にサポートされています。

位置を指定するには

表示位置を指定するにはpositiopnプロパティとtop、right、bottom、leftプロパティを併用します。

プロパティ:値	説明
top: 数値＋単位	基準位置の上端から配置するボックスの上端までを指定
right: 数値＋単位	基準位置の右端から配置するボックスの右端までを指定
bottom: 数値＋単位	基準位置の下端から配置するボックスの下端までを指定
left: 数値＋単位	基準位置の左端から配置するボックスの左端までを指定

サンプル

記述例

div.sample {
margin-bottom: 5px;
position: relative;
height: 50px;
background: #ccc;
}
span.sample1 {
position: static;
top:10px;
color: #f00;
}
span.sample2 {
position: relative;
top:10px;
color: #f00;
}
span.sample3 {
position: absolute;
top:10px;
color: #f00;
}
span.sample4 {
position: fixed;
bottom:10px;
color: #f00;
}

実際の表示