Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

LAYOUT配置TOPCSSPropertiesLayout

  1. display生成するブロック要素の種類
  2. position要素の配置方法
  3. floatフロート(浮動)の指定
  4. clearフロート(浮動)の解除
  5. visibility要素の表示/非表示
  6. top上辺からの距離
  7. right右辺からの距離
  8. bottom下辺からの距離
  9. left左辺からの距離
  10. z-indexスタックレベル(重なり順序)の指定
  11. overflow表示領域をはみ出したテキストの表示方法
  12. clip切り抜き表示(クリッピング)

position生成するブロック要素の種類

プロパティの値static | relative | absolute | fixed | inherit
初期値static
対象要素全要素
継承しない
%無効
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

positionプロパティは、相対配置や絶対配置といった要素の配置方法を指定します。通常は関連プロパティであるtop, bottom, left, rightと併用し、基準となる位置からのオフセット(移動量)を指定します。

プロパティの書式機能
position: static通常フローに基づく要素の配置
position: relative親ブロックの位置を基点とした相対配置の指定
position: absolute親ブロックの位置を基点とした絶対配置の指定
position: fixedルート要素(画面の左上)を基点とした絶対配置の指定
position: inherit継承

オフセットの基準となる位置は、親要素のposition値が何であるかによって変わります。また、ルート要素とビューポートの左上とでは、意味が異なることに注意する必要があります。

Case-1親ブロックのpositionがstatic(または指定無し)の場合
指定する値基準となる位置ビューポートに対するスクロール後続要素への影響
relative自要素の左上するしない
absoluteルート要素の左上するする
fixedビューポートの左上しないしない
Case-2親ブロックのpositionが相対または絶対指定の場合
指定する値基準となる位置ビューポートに対するスクロール後続要素への影響
relative自要素の左上するしない
absolute親ブロックの左上するする
fixedビューポートの左上しないしない

EXAMPLEposition:relative(相対位置の指定)

STEP-1positionプロパティを指定しない場合

Box1~3にはpositionプロパティにstaticを指定しています(positionプロパティを指定しない場合と同じ)。ブロックは通常フローに従って、HTMLソースに記述された順番に配置されていきます。

Box1
	position:static
Box2
	position:static
Box3
	position:static
STEP-2Box2にposition:relative(相対配置)を指定

Box2のpositionプロパティにrelativeを指定します。また、オフセットの基準位置を確認するために、top:20pxおよびleft:50pxオフセット指定を追加します。通常フローに基づくボックス位置が基準となること、ボックス領域も確保されているため、後続の要素の配置には影響しないことが確認できます。

Box1
	position:static
Box2
	position:relative
	top:20;left:50
Box3
	position:static
STEP-3Box2にposition:absolute(絶対配置)を指定

STEP-2のBox2のpositionプロパティにabsoluteを指定します。これだけではルート要素の左上が基準位置となってしまうため、親ブロックにposition:relativeを指定して基準位置を親ブロックの左上に変更しています。Box2は通常フローから外れ、後続の要素はBox2の存在を無視して配置されることが確認できます。

Box1
	position:static
Box2
	position:absolute
	top:20;left:50
Box3
	position:static

MEMO

配置フローについて

要素の配置はブロックの配置フローとインラインの配置フロー(行内フロー)の2種類があり、ブロック要素であるかインライン要素であるかによって、それぞれ異なった配置フローが適用されます。positionプロパティの値がstatic(初期値)の状態では、それぞれの通常の配置フローに沿って要素が並べられていきます。

基準位置からのオフセットについて

positionとの関連プロパティであるtop, bottom, left, rightを併用することにより、対象要素の表示位置を基準となる位置からオフセットすることができます。このとき、オフセットしたインライン要素はブロックとして扱われ、widthやheight等の領域指定が可能となります。また、float指定は強制解除されます。

配置の基準となる位置

オフセット距離の基点位置は、配置関連プロパティであるtop, bottom, left, rightで指定しますが、これらの初期値は全てautoになっています。topとbottomあるいはleftとrightで指定が競合する場合、それぞれtopおよびleftが優先され、結果的に左上が初期の基点位置となります。なお、directionプロパティでrtlを指定している場合はrightが優先され、右上が基点となります。

fixedはabsoluteと同じく絶対配置ですが、最大の違いは基準位置がルート要素であるかビューポートであるかです。fixedではブラウザの表示ウィンドウ(ビューポート)の左上が基点位置となります。ルート要素はビューポートに対してスクロールしますが、ビューポートはブラウザの表示領域の4隅を基準位置とするので、fixedブロックはその場所に固定されたままスクロールしません。W3CのWebサイトではこの性質を利用して、ロゴを固定位置に表示させています。

スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.