制作者のオリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画position: static;の場合position: relative;の場合position: absolute;の場合position: fixed;の場合ポジショニングとは、ボックス配置の位置を決めることです。
通常、ボックスの配置はブラウザが適切に決めておりますが、それをCSSでの指定でコントロールすると言うものです。
ある要素をポジショニングするにはまず、positionプロパティでポジショニングの方法を指定し、さらに位置をtopプロパティ，leftプロパティ，bottomプロパティ及びrightプロパティのうちの幾つかを組み合わせて指定します。
positionプロパティを用いる事で、ポジショニングの方法を指定出来ます。
positionプロパティの値には主に以下のキーワードを用います。
staticrelativeabsoluteこの値を指定した場合は<body>要素の左上端を原点とした相対位置を後述のtopプロパティ，leftプロパティ，bottomプロパティ及びrightプロパティで指定します。
但し、当該要素の上位にある要素(親要素より上位でも可)でpositionプロパティにstatic以外の値を当てている要素があればその中で一番下位にある要素の左上端を基準とします。
fixedウインドウのクライアント領域の左上端を原点とした絶対位置を後述のtopプロパティ，leftプロパティ，bottomプロパティ及びrightプロパティで指定します。この場合、いくらスクロールしても位置が変わりません。
topプロパティ, leftプロパティ, bottomプロパティ及びrightプロパティは、いずれも表示位置を指定します。
実際にはtopプロパティかbottomプロパティのどちらか片方とleftプロパティかrightプロパティのどちらか片方をそれぞれ指定することになります。
topプロパティ, leftプロパティ, bottomプロパティ及びrightプロパティがとり得る値としては、主に以下の単位を用います。
pxem%position: relative;なら親要素、position: fixed;ならウインドウのクライアント領域)の大きさに対する割合です。ポジショニングを行う場合、あるボックスに別のボックスが重なるということがあり得ます。
このため、CSSでは通常のX座標とY座標の他に、ボックス重ね合わせの上下関係を規定するZ座標も規定されております。
Z座標は正なら上(閲覧者から見て手前)に、負なら下(閲覧者から見て奥)に重ねられます。
z-indexプロパティでボックスの上下関係、すなわちZ座標の関係を指定出来ます。
値としては整数が使われます。この値は上位要素のZ座標に加算される相対値となります。
尚、Z座標が同じ要素は、文書中後方の要素が上に重ねられます。
文書中にポジショニングされたボックスがある場合、後続の要素の配置に以下のような影響があります。
position: static;の場合。ポジショニングされていないものとして扱います。
すなわち、当該要素も後続の要素も通常通りの配置となります。
position: relative;の場合。positionプロパティでrelative値を指定しているボックスがある場合、そのボックスが通常通りに配置されているものと仮定して後続の要素が配置されます。すなわち、「position: relative;」を当てている要素だけがtopプロパティやleftプロパティなどで指定した分だけずれることになります。
position: absolute;の場合。position: fixed;の場合。positionプロパティでabsolute値またはfixed値を指定しているボックスがある場合、その他のボックスは、当該ボックスが存在しないものとみなして配置されます。すなわち、当該ボックス直前の要素に続いてボックス直後の要素が配置される事になります。
