【position:relative】相対位置で配置する

positionプロパティで値に「relative」を指定すると、その要素を相対位置で配置することができます。

相対位置とは、本来表示されるべき位置を基準として、そこからの移動距離を指定して表示位置を決める配置方法です。 後続のボックスは、相対位置を指定したボックスが通常通り表示されているものとして配置されます。

※相対位置を指定したボックスの位置を移動させても、そのボックスが本来表示されるべき位置(スペース)は残ったままとなります。

またposition:relativeでは、相対位置の指定のみしかできません。 ですので実際に表示位置を指定するには、topleftrightbottomプロパティを使用する必要があります。

topで上から下へ移動させる距離、leftで左から右へ移動させる距離、rightで右から左へ移動させる距離、bottomで下から上へ移動させる距離を指定して下さい。

書式

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

★:実数値+単位、%

使用した時の例

.sample1 {position: relative; top:40px; left:100px; background: #FC5D5D;}
 
.sample00 {background:#EEF4FA;}
<div class="sample00">
position:relative
  <div class="sample1">この部分に相対配置を指定</div>
  <div>続くボックス</div>
</div>

ブラウザ上の表示例

position:relative
この部分に相対配置を指定
続くボックス

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

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

関連情報