ポジショニング(位置指定配置)関連の主なプロパティ。

CSS(カスケーディングスタイルシート)でのポジショニング(位置指定配置)を行うためのプロパティ(属性)について、主なものについて解説します。

ポジショニングとは何か。

ポジショニングとは、表示位置を指定してそこに要素を配置する事です。

現在のCSSの仕様(CSS第二水準第一改訂版)では、何でもポジショニングさせる事が出来るものとしております。

positionプロパティは、ポジショニング方法の指定です。

position プロパティの主なプロパティ値としては、以下のものが取れます。

コンテナブロックとは、ポジショニングしたい要素の上位要素のうち、static 値以外の position プロパティ値を与えられた要素の事です。

static 値以外の position プロパティ値が与えられると、その要素の下位要素は absolute 値で絶対位置に表示する際に、この要素の座標を基準とした位置となります。

このため、ある特定の要素の位置をズラすのに、無意味に親要素に relative 値を与えるテクニックもあり、実習(8)でもそのようなテクニックを用いております。

relative 値の場合、後続の要素が当該要素がズラされていないものとして表示を続けるため、後続要素に影響を与えません(他の static 値以外の値では、後続の要素の配置に影響を与えてしまうので、このように当該要素を動かしたくない場合などには使う事は出来ません)。

top プロパティは要素の上端の位置です。

但し、positionプロパティで static 値以外の値が指定された場合のみ有効です。

また、実際にどの位置に配置されるのかは、position　プロパティの値に依ります。

top プロパティの値としては、以下のものがあります。

bottom プロパティは要素の上端の位置です。

但し、positionプロパティで static 値以外の値が指定された場合のみ有効です。

また、実際にどの位置に配置されるのかは、position　プロパティの値に依ります。

bottom プロパティの値としては、以下のものがあります。

left プロパティは要素の左端の位置です。

但し、position プロパティで static 値以外の値が指定された場合のみ有効です。

また、実際にどの位置に配置されるのかは、position プロパティの値に依ります。

left プロパティの値としては、以下のものがあります。

right プロパティは要素の右端の位置です。

但し、position プロパティで static 値以外の値が指定された場合のみ有効です。

また、実際にどの位置に配置されるのかは、position プロパティの値に依ります。

right プロパティの値としては、以下のものがあります。

ポジショニングを行う要素の高さが確定している状況で、top プロパティと bottom プロパティが同時に指定されている場合、bottom プロパティは無効となります。

これは、プロパティに依って与えられた上端と下端の位置から算出される高さが、要素本来の高さと矛盾する恐れがあるからです。

具体的には、

が該当します。

同様に、幅が確定している要素に対し、left プロパティと right プロパティが同時に指定されている場合、書字方向の反対側のプロパティが無効になります。