通常、HTMLに記述した内容は上から下に向かって順番に表示されます。段組構成を作れば例外的に横方向に並べることもできますが、それでも「上から下へ順番に表示」される点に変わりはありません。

スタイルシートを使えば、ある特定のボックスを、通常の表示位置から完全に分離して、望みのままの位置に浮かせて表示させることもできます。
例えば、この解説ページでもその「絶対配置」の装飾を使って、ページの右上に検索ボックスを表示させています。ページ右上の検索ボックスは、かなり「ページ上部」に表示されてはいますが、HTMLソースではかなり下の方に記述されています。

この「絶対配置」の活用方法としては…

• あまり重要ではない項目をページの上部などに配置したい場合
• 複雑なレイアウトを作らずに、何かを特定の位置に配置したい場合

…などが考えられます。
「検索ボックス」とか「アクセスカウンタ」とか「ただの飾り」とか、「コンテンツの重要度は低い」ものの「配置は上部にしたい」ものの表示なんかに適している気がします。

ページ上の任意の位置に絶対配置するには、例えば以下のようにスタイルを記述します。

div.fbox {
   position: absolute;
   top: 10px;
   right: 30px;
}

上記のスタイルシートを使うと、div要素（fboxクラス）全体が、（本来表示される位置から離れて）ページの右上に表示されます。具体的な位置は、上端から10ピクセル・右端から30ピクセルの位置です。

positionプロパティに値「absolute」を指定すると、その要素は本来表示される位置から離れて、任意の位置に表示できるようになります。具体的な表示位置は、top・right・bottom・left各プロパティを組み合わせて指定します。説明するまでもないかも知れませんが、以下の意味です。

• topプロパティ： 上端からの距離を指定
• bottomプロパティ： 下端からの距離を指定
• leftプロパティ： 左端からの距離を指定
• rightプロパティ： 右端からの距離を指定

この4つのプロパティのうち2つを使って、左上・右上・左下・右下からの距離を指定できます。
先ほどの例では、topプロパティとrightプロパティを使っているので、「右上」からの距離を指定したことになります。

「右上」や「右下」に配置する場合は、ボックスの中身も「右寄せ」にしておく方が良いかも知れません。その場合は、先ほどのスタイルにtext-alignプロパティを加えると良いでしょう。例えば、以下のように。

div.fbox {
   position: absolute;
   top: 10px;
   right: 30px;
   text-align: right;
}

text-alignプロパティは、1行内の文字列の配置を指定するプロパティです。値「right」を指定すると「右寄せ」で表示されます。（leftなら左寄せ、centerならセンタリング。）
これで、このボックス（div要素）自体がページの右上に配置され、その中身も右寄せで表示されます。

重なる点に注意

positionプロパティに値「absolute」を指定して任意の位置に表示させた場合、表示させた位置に元々文字や画像などが存在した場合は、それらに重なって表示されます。floatプロパティなどで寄せた場合と違って、元々ある文字が避けて回り込んだりしません。そのまま上に重なって表示されます。場合によっては、そこにあった文字が読めなくなることもありますので、配置には注意が必要です。

なお、positionプロパティに値「absolute」を指定しなかった場合に本来表示されているべき位置には、何も表示されません。元々確保されるはずだった空間は確保されず、次に続く要素が詰めて表示されます。

absoluteの表示位置の詳細

上記の説明では、「ページの端を基準にして配置」と言いましたが、これは必ずしも正確ではありません。なぜなら、positionプロパティに値「absolute」が指定されているブロック(※1)の中で、さらにpositionプロパティに値「absolute」を指定したブロックを作ると、そのブロックは「ページの端」ではなく「外側のブロックの端」を基準にして配置されるからです。

外側にpositionプロパティが指定された要素（※2）が1つも存在しない場合は、html要素が基準になるため、それはつまり「ページの端が基準」ということと同じなので、「ページの端からの指定距離」に配置されることになるわけです。

※1：positionプロパティの値に「absolute」が指定されている場合以外でも、positionプロパティの値に「relative」や「fixed」が指定されている場合でも同様。
※2：positionプロパティの値が「static」なものは除く。（staticはデフォルト値で、本来あるべき位置に表示させる指定）