構文

position : 配置方法;

説明文

　「position」は要素の配置方法を指定できる。通常，記述したタグの順序が構成によって，各要素の配置位置が決定する。例えば，<h1>要素の後に<div>要素を指定すれば，<h1>の内容の次に<div>の内容が表示される。

　「position」で配置方法を指定することで，他の要素の配置に関わらない自由な位置に要素の内容を表示できる。例えば，ページの右上にメニューを表示しておくといったことが行える。

　以下のような配置方法を用いることができる。

配置方法意味
staticHTMLの構造に従って配置を行う。座標を指定した自由な配置は行えない
relative構造に従って要素が配置される場所を基準にして，座標指定で要素を配置する（相対座標により配置）
absoluteWebページの左上を基準にして，座標指定で要素を配置する（絶対座標により配置）
fixed構造に従って要素が配置される場所を基準にして，座標指定で要素を固定は位置する。スクロールを行っても要素は動かない

　「absolute」を指定すると，Webページの左上を基準にし，そこから指定した座標に要素を配置する。そのため，HTMLのどこに記載しても，同じ位置に要素が表示されるようになる。

　「relative」を指定すると，座標指定しない場合に本来表示される位置を基準にし，そこから指定した座標に要素を配置する。そのため，HTMLのどこに記載するかで表示位置が異なる。親要素内で表示位置を指定したい場合などに利用できる。

　また，配置位置の指定には，スタイルシートのtop，bottom，left，rightを利用する。

使用例

● CSSの定義

div.menu { position : fixed ;
           bottom : 10px;
           right : 10px;;
           width : 150px;
           height : 300;
           border : 2px solid #000080;
           z-index : 10;
           background-color : #c0c0ff;
           padding : 10px;
}

● HTMLの例

<body>
<div class="menu">
メニュー
<ul>
    <li><a href="a.html">CSSの基本</a></li>
    <li><a href="b.html">主なCSS</a></li>
    <li><a href="c.html">ボックス要素</a></li>
    <li><a href="d.html">配置</a></li>
</ul>
</div>
<h1>CSSの基本</h1>
<p>Webページを作成する際，自由にデザインを行える。この際，文書の構造を
HTMLに文書のデザインをCSSに分けて記述することになっている。例えば，フォン
トのサイズを大きくする，背景の色を指定する，枠線を指定するといったことが
できる。</p>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目