HTMLに記述した内容は、基本的には上から下に向かって順番に表示されます。段組レイアウトを作れば横方向に並べることもできますが、それでも全体としては「上から下へ順番に表示」される点に変わりはありません。

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

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

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

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

特定の要素を、絶対的な位置に表示させるには

さて、あるボックスをページ上の任意の位置に絶対配置するには、例えば以下のようにCSSソースを記述します。

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

上記のスタイルシートを使うと、class名が「fbox」のdiv要素全体が、(本来表示される位置から離れて)ページの右上に表示されます。具体的な位置は、ウェブページ自体の上端から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」を指定しなかった場合に)表示されるハズだった位置には何も表示されません。元々確保されるはずだった空間は確保されず、後続の要素が詰めて表示されます。

ページの端が基準になる……とは限らない

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

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

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

(更新日：2016年01月31日)