【position】配置方法(基準位置)を指定

positionプロパティでは、ボックスの表示位置を決めるための配置方法(基準位置)を指定することができます。

配置方法には絶対配置と相対配置がありますが、値にstatic以外が指定されている場合、実際に表示される位置はtopleftrightbottomプロパティを使って指定します。

書式

  • position : ……… 配置方法を指定する

★:static、relative、absolute、fixed、inherit

static
配置方法を指定しないで通常通りの位置に配置します。この値を指定した場合は、top、left、right、bottomは適用されません(初期値)
relative
相対配置にします。通常通りの位置を基準とし、そこから指定した値だけ移動するようになります。またこのあとに続くボックスは、relativeを指定したボックスが通常通り表示されているものとして配置されます。
absolute
絶対配置にします。これを指定したボックスを含むボックス(包含ブロック)のうち、positionプロパティの「static」以外の値が指定されている一番近い階層のボックスを基準位置とし、そこからの距離で配置します。absoluteを指定した場合、そのボックスは独立した配置となり、他の要素は絶対配置の要素を取り除いたような状態で表示されます。なお包含ブロックに「static」以外の値が指定されていない場合は、html要素が基準位置となります。
fixed
固定された配置にします。これを指定するとウィンドウの表示領域が基準となり、そこからの距離で配置します。また絶対配置と同様に独立した配置となり、スクロールしても位置が固定され移動しなくなります。

使用した時の例

.sample1 {position: static; top:0px; left:100px;}
.sample2 {position: relative; top:0px; left:100px;}
.sample3 {position: absolute; top:0px; left:100px;}
.sample4 {position: fixed; top:0px; left:10px;}

.sample00 {position: relative; background:#EEF4FA;}
.sample1,.sample2,.sample3,.sample4 {color:red; font-weight:bold;}
<div class="sample00">
position: static;
  <div class="sample1">この部分にstaticを指定</div>
</div>

<div class="sample00">
position: relative;
  <div class="sample2">この部分にrelativeを指定</div>
</div>

<div class="sample00">
position: absolute;
  <div class="sample3">この部分にabsoluteを指定</div>
</div>

<div class="sample00">
position: fixed;(画面の左上にあります)
  <div class="sample4">この部分にfixedを指定</div>
</div>

ブラウザ上の表示例

position: static;
この部分にstaticを指定
position: relative;
この部分にrelativeを指定
position: absolute;
この部分にabsoluteを指定
position: fixed;(画面の左上にあります)
この部分にfixedを指定

対応ブラウザなどのデータ

初期値 static 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

※fixedはInternet Explorer7~

関連情報