acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

ads

positionプロパティのrelative、absoluteの簡単な使い方

2009/4/24 大幅改訂、relativeのみの解説を追加

positionプロパティを検索すると、relativeが本来配置される位置からの相対配置、 absoluteがブラウザ左上からの絶対配置または親要素にpositionが含まれている場合はその位置からの絶対配置、というのがでてきます。これをもう少し解説すると

  • relativeのみ
    本来配置される位置から指定した値だけ移動する。
    本来配置される位置には移動した要素の幅、高さが確保されたままになる。
  • relative(absolute)とabsoluteの組み合わせ
    absoluteの親要素にposition(relativeまたはabsolute)が指定してある場合は、その親要素の位置が基準点となり指定した値だけ移動する。
    本来配置される位置には移動した要素の幅、高さが確保されない。
  • absoluteのみ
    基準点がない場合はブラウザの左上から指定した値だけ移動する。
    本来配置される位置には移動した要素の幅、高さが確保されない。

となります。
absoluteのみは滅多に使うことはないでしょう。
まずは一番使用頻度の高いrelativeとabsoluteの組み合わせを解説していきます。

配置したい要素の親要素にposition:relativeを指定して基準点を作り、次にposition:absoluteで場所を指定します。
この場合は本来配置される位置は確保されないので後に続くテキストデータが左上詰めになっています。

div{
position:relative;
background-color:#:#999999;
width:700px;
height:150px;
}

span{
position:absolute;
top:50px;
left:100px;
background-color:#:#bbbbbb;
}

<div>
relativeボックス（親要素）
<span>absolute（子要素）</span>テキストデータ
</div>

relativeを指定して基準点にしたボックス（親要素）本来配置される位置は確保されないので左にテキストが詰まっている absoluteを指定してrelativeが指定されたボックスの
上から50px、左から100pxの場所に移動したspan（子要素）

relativeだけの場合は本来配置される位置から指定した値だけ移動します。
この場合は移動する要素の幅、高さが本来配置される位置に確保されたまま移動するためテキストデータの先頭に空白の場所ができています。

span{
position:relative;
top:50px;
left:100px;
background:#bbbbbb;
}

<span>relative</span>テキストデータ

relativeを指定して移動したspan本来配置される位置は確保されたまま移動するためテキストの左にスペースができている
ads

positionを使ったCSSテクニック

お薦めの参考書

CSS、webデザイン学習書籍、参考書をアマゾンで購入する

Copyright (C) acky. All Rights Reserved.