positionプロパティの「relative」「absolute」の使い方

ポジションプロパティの使い方

思い通りのデザインに簡単にできるpositionプロパティの紹介です!

positionプロパティって響きがなんか難しそうに感じさせてくれますが、実はとっても簡単! 簡単にいうと、なんでも好きな位置に移動できる設定って感じです(^^)/

例えばHTMLドキュメント(ファイル)にdivやh1などのタグ(ボックスレベル要素)を記述していくと、今までは上から記述した順に配置されていきました。 でもこのpositionプロパティを使うと、順番に関係なく、ページ上の好きな位置に自由に配置することができます。

そしてこの配置する方法は大きく分けると「相対配置(relative)」「絶対配置(absolute)」の2種類あります。 この二つの違う所は、表示する位置の基準となる位置が違うというとこ。 といってもわかりずらいので、relativeとabsoluteを使って一緒に位置を変えていってみましょう。

目次
relativeで位置を変えてみる
ポジションプロパティの仕様など

relativeで位置を変えてみる

relativeサンプル画像
<div>
  <img id="img-1" src="img-1.jpg">
  <img id="img-2" src="img-2.jpg">
  <img id="img-3" src="img-3.jpg">
</div>

まずはrelative(相対配置)を使って要素(h1やpなど)の位置を変えてみましょう!

上のサンプルは単純に画像を並べているだけです。まだrelativeを使っていません。

※imgはインライン要素なので、何もしなくても横に並びます。

では、relative(相対配置)を使って真ん中の画像(img-2)の位置を変えてみましょう! まずは位置を変えたい要素(img-2)に配置する方法を指定します。

この場合relativeでの例なので、「position:relative;」というように記述!

#img-2{
  position:relative;
}

これでimg-2を相対配置で位置を変更することができるようになりました! ですが、配置方法を指定しただけなので、まだ位置は変わりません。(最初の画像のまま)

位置を変えるにはtop(上部からの距離)、bottom(下部からの距離)、left(左からの距離)、right(右からの距離)を使います。 では上から100px、左から200pxの位置にimg-2を動かしてみましょう。

#img-2{
  position:relative;
  top:100px;
  left:200px;
}
relativeでの位置変更説明

どうでしょうか?位置は変わりましたか?

relative(相対配置)の場合こんな感じで、本来表示されるべき位置から指定した距離の分だけ、表示位置をずらすことができます。 なのでimg-2が元々あった場所のスペースが空いたままですよね。 これがrelative(相対配置)の特徴です。

では次はabsolute(絶対配置)で表示位置を変えてみましょう!

absolute(絶対配置)で位置を変えてみる

absoluteサンプル画像
<div>
  <img id="img-1" src="img-1.jpg">
  <img id="img-2" src="img-2.jpg">
  <img id="img-3" src="img-3.jpg">
</div>

先ほどと同じサンプルを使ってabsolute(絶対配置)で位置を変えてみましょう! さっきと同じように、まずは位置を変えたい要素(img-2)の配置方法を指定します。

ここでは絶対配置を使いたいのでabsoluteを指定!

#img-2{
  position:absolute;
}

これでimg-2が絶対配置(absolute)で位置変更できるようになりました。 もちろんまだ配置する方法を指定しただけなので、位置は変わってません。 位置を変えるには、さっきと同じようにtop、bottom…を使って設定します。

では相対配置との違いを比べるために、同じ上から100px、左から200pxの位置に設定してみましょう。

absoluteの位置変更解説
#img-2{
  position:absolute;
  top:100px;
  left:200px;
}

absolute(絶対配置)の場合は、こんな感じで親ボックス(img-2の場合div)の左上が基準となり、そこから指定した分だけ移動します。 ですが親ボックスにpositonプロパティを指定していない場合は、ブラウザ画面の左上が基準となります。

この場合は、img-2の親ボックスであるdivにpositionプロパティは設定していませんよね。 だから画面の左上が基準となって上から100px、左から200px分だけ絶対配置を指定したimg-2が動いたわけです。

そして絶対配置の場合は要素(この場合img)が詰められて表示されます。 相対配置の場合は、指定した部分のスペースが空いたまま移動しましたが、絶対配置の場合はスペースが空く事はないっていうことです。

なんとなくわかったと思いますが、まだイマイチわかんないですよねきっと。 なのでもうちょっと詳しく説明しますね。

絶対配置の詳しい使い方

絶対配置のサンプル
<h1>絶対配置のサンプル</h1>
<div>
  <img id="img-1" src="img-1.jpg">
  <img id="img-2" src="img-2.jpg">
  <img id="img-3" src="img-3.jpg">
</div>

先ほどのサンプルにh1を付けました。 この状態で先ほどと同じようにimg-2にabsoluteを設定してみます。

#img-2{
  position:absolute;
  top:100px;
  left:200px;
}
absolute基準位置の説明

img-2の表示される位置が変わりましたよね。 これは移動したい要素(img-2)のみにしか配置方法(ポジションプロパティ)を指定していないためです。

そのため基準となる位置がブラウザ画面の左上となっているので、そこから設定した分のみ動いているわけです。 例えばtop:0;、left:0;にするともっとわかりやすいと思います。

absoluteでtop0、left0の表示例
#img-2{
  position:absolute;
  top:0px;
  left:0px;
}

こんな感じで0にすると基準の位置がわかります。 (この場合は基準位置がブラウザ画面の左上となっている)

でも基準位置が画面の左上となっていると、使いづらいですよね。 なのでこの基準位置を変えてあげるために、位置を変えたい要素(この場合img-2)の親ボックス(この場合div)ポジションプロパティを設定してあげます。

divにポジションプロパティを設定後の例
div{position:relative;}
#img-2{
  position:absolute;
  top:100px;
  left:200px;
}

こうするとimg-2の親ボックス(div)の左上が基準位置となるので、そこから指定した分だけ移動するわけです。 基準位置と各ボックスの配置は下の画像を参考にしてみて下さい。

基準位置と各ボックスの配置の説明

そして画像をみるとわかると思うんですが、absoluteを指定した要素(この場合img-2)は親ボックス(この場合div)をはみ出して表示することができます。 つまりどこでも自由な位置に表示することが可能なのです。(独立しての表示が可能)

基本的に基準位置は、親ボックスにポジションプロパティ(relative、absolute、fixed)のどれかを指定していれば、そこが基準となるので使いやすいようにやってみて下さい。 一応ポジションプロパティの仕様なども書いておきますね。

ポジションプロパティの仕様など

positonはボックスの配置方法を指定するためのプロパティ。 指定できる配置方法は下記のいずれか。

  • 相対配置
    本来表示されるべき位置から指定した距離だけ表示位置をずらす
  • 絶対配置
    対象のボックスを含む親ボックスの左上からの移動距離で表示位置を指定。※親ボックスを指定していない場合、ブラウザ画面の左上が基準となる
指定できるキーワード
キーワード 意味
static 配置方法を指定しない(初期値)。この値の時top、bottom、left、rightは反映されない
relative 相対配置
absolute 絶対配置
fixed 基準位置がページ全体となる。スクロールしても位置が固定されたまま表示される
表示位置を指定するプロパティ
プロパティ 意味
top 上からの距離
bottom 下からの距離
left 左からの距離
right 右からの距離
top、bottom、left、rightに設定できる値
意味
単位付きの数値 pxなどの単位を付けての指定
パーセンテージ 基準となる親ボックスの幅・高さに対する割合を%で指定
auto 表示位置が自動的に調整される(初期値)

ちなみに数値には負の値も記述できます。 例えばtop:-20px;のように。

こうすることで、各ボックスを好きな位置に配置することができるので、ぜひ色々試してみて下さいね(^^♪