絶対位置と相対位置/HTML基礎講座

この節では、配置のコントロールの１つの手段とする「絶対位置」について解説します。

「絶対位置」の指定は、使い方によって、テーブルなどを使わないで、魅力的なレイアウトを構築することができます。

コンテンツを最初から位置を指定する「絶対位置」とは、ブラウザ画面の座標を指定して、そこにコンテンツを配置する方法で、スタイルシートだけで実現する機能です。

絶対位置の指定は、スタイルシートによる position属性を使います。

具体的な position属性の値とその機能は以下のとおりです。

**`position`属性の値とその機能**
値	機能
absolute	ひとつ外側のボックスからの絶対位置で配置する
relative	標準の位置からの相対位置で配置する
static	配置方法を指定しない標準の状態に設定する (デフォルト)
fixed	ひとつ外側のボックスからの位置で配置し固定する

この属性値の中で、absolute を使うことで、絶対位置になります。ただし、その場合、同じくスタイルシートで、top属性などを使って、実際の座標を指定しなければなりません。

具体的には、

 position属性　　絶対位置を定義する
 top属性　　　 　画面の上からの位置を指定する
 left属性　　　　画面の右からの位置を指定する

などというように、コンテンツを表示させる位置を指定することが求められます。

実際のサンプルをご覧下さい。ブロックレベル要素を左右に、それぞれ絶対位置指定で表現しています。　絶対位置指定のサンプル

初版公開日 2002年9月5日最新更新日 2004年3月7日

■ 絶対位置