position
解説
ボックスの配置方法を相対位置にするか絶対位置にするかを指定します。
| static | 特に配置方法を指定しない。このときは、top等の距離指定は適用されない（初期値） |
|---|---|
| relative | 相対位置への配置（staticを指定した場合に表示される位置が基準位置） |
| absolute | 絶対位置への配置（基準位置は親ボックスの状況により親ボックス又はウィンドウの左上） |
| fixed | 絶対位置への配置は absolute と同じだが、スクロールしても位置が固定されたまま |
プロパティ情報
| 値： | static,relative,absolute,fixedのいずれか。 |
|---|---|
| 初期値： | static |
| 適用対象： | 生成内容以外の全ての要素 |
| 継承： | しない |
| パーセンテージ： | 無し |
| 適用メディア： | 視覚 |
| レベル： | 2 |
参照
top bottom left right overflow overflow-x overflow-y position display float clear z-index visibility clip direction unicode-bidi writing-mode
使用例
ソース
CSSの記述方法はスタイルシートってなに？も参照下さい。 div.sample {height:40px; background-color:#ffeeee; font-weight:bold; position:relative } span.sample1 {color:#0000ff; position:static; top:10px; left:10px } span.sample2 {color:#0000ff; position:relative; top:10px; left:10px } span.sample3 {color:#0000ff; position:absolute; top:10px; left:10px } span.sample4 {color:#0000ff; position:fixed; top:10px; left:10px }
HTMLの記述方法 <div class="sample">position:static<span class="sample1">staticの場合</span></div> <div class="sample">position:relative<span class="sample2">relativeの場合</span></div> <div class="sample">position:absolute<span class="sample3">absoluteの場合</span></div> <div class="sample">position:fixed<span class="sample4">fixedの場合</span></div>
表示結果
position:staticstaticの場合
position:relativerelativeの場合
position:absoluteabsoluteの場合
position:fixedfixedの場合
