【position:absolute】絶対位置で配置する

positionプロパティで値を「absolute」と設定すると、その要素の配置方法(基準位置)が絶対位置となります。

絶対位置では、位置を指定する際の基準となるボックスがページ全体となりますが、「absolute」を指定したボックスがpositionプロパティのstatic以外の値(relative・absolute・fixed)を指定したボックスに含まれている場合、そのボックスが基準ボックス(位置)となります。

ただしposition:absoluteでは絶対位置の指定のみしかできません。 なので実際に表示する位置を決めるにはtopleftrightbottomプロパティを使用します。

topは基準ボックスの上からabsoluteを指定した要素の上までの距離、leftは基準ボックスの左からabsoluteを指定した要素の左までの距離、rightは基準ボックスの右からabsoluteを指定した要素の右までの距離、bottomは基準ボックスの下からabsoluteを指定した要素の下までの距離となります。

なお絶対位置を指定すると、その要素は独立した配置となるため、その絶対位置の要素が取り除かれたような状態で表示されます。 このため他の要素の配置には影響を与えなくなります。

書式

  • position : absolute ……… 絶対位置で配置する
  • top : ……… 上からの距離
  • left : ……… 左からの距離
  • right : ……… 右からの距離
  • bottom : ……… 下からの距離

★:実数値+単位、%

使用した時の例

.sample1 {position: absolute; top:40px; left:100px;}

.sample00 {position: relative; background:#EEF4FA;}
<div class="sample00">
ここが基準ボックス
  <div class="sample1">この部分に絶対配置を指定</div>
</div>

ブラウザ上の表示例

ここが基準ボックス
この部分に絶対配置を指定

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

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

関連情報