positioning

position
配置方式指定要素
+static
+relative (相対配置)
+absolute (絶対位置)
+fixed (IE7~)

□static
"top, bottom, left, right" の位置を指定するプロパティの効果は無効となり、その要素が本来レンダリングされる通常通りの位置に配置される。

relative
その要素が本来レンダリングされるはずの位置を基準にした位置指定。
その要素が本来レンダリングされる通常通りの位置に配置され、要素の配置されている元の位置からどれだけずらすかを "top, bottom, left, right" の各プロパティで指定する相対的な位置指定となる。

absolute
包含ブロックを基準にした位置指定。
包含ブロック(祖先要素のうち、もっとも近い祖先の要素にあたるブロック要素の内容領域)の各辺を基準に配置され、"top, bottom, left, right" の各プロパティで指定する絶対的な位置指定となる(祖先要素に位置指定されている要素がなければ、初期包含ブロックを基準とする)。

□fixed
"absolute" に従って配置された後、ページやウィンドウなどの表示域に対して固定され、スクロールしても動かないように表示される。


■包含ブロック
自分の祖先(親や、親の親)要素のうち、position: static 以外の指定を受けたボックス。
つまり、あるボックスを position: absolute で位置指定するためには、
先に position: relativeposition: absoluteposition: fixed のいずれかのボックスを生成しておき、
その子要素として位置指定を行わなければいけない。


□じゃ、最初の position: absolute を指定する要素は何を基準にするの?
―それは初期包含ブロック。
 要するに body 要素すべてを飲み込む最も大きなブロックが初期包含ブロック。
 スクロールする部分も含めてすべての部分。

ところで当たり前だけれどこれは HTML でも CSS でも明示できない。
単に位置、大きさの基準になるだけで何らかの効果を指定することは不可能である。


ref:
PC説教口座#CSS実験室2
http://pctraining.s21.xrea.com/making-web/box-view2.html
SEO-Equation
http://www.seo-equation.com/html/css/position

tag : css style position relative absolute

2007-06-21 00:45 : css : コメント : 0 : トラックバック : 0 :
コメントの投稿
非公開コメント

« next  ホーム  prev »

search

ad



counter


tag cloud

category cloud