ホーム >>> HTML整理ノート

position 要素の配置位置を指定

position:(値)
・要素をどの位置に配置するかを指定する。

(値)
 static ・・・(初期値)配置方法を指定しない。通常は明示的にstaticを指定する必要
    はない。
 relative ・・・(相対配置)通常配置の位置からの相対位置を指定する。position指定
    しなかった場合に配置されるはずであった位置を計測の基準にする。
 absolute ・・・(絶対配置)親要素(コンテナ)の左上が配置の原点(0,0)になる。
    その原点を基準にして配置する。
 fixed ・・・absoluteと同じだが、画面をスクロールしても常に同じ位置に表示される。
    即ちプラウザの画面表示領域の左上が配置の原点になり、そこからの距離を維持する。

Sample

position指定無し、通常の表示

これはstaticのサンプル。通常の表示と全く同じ

これはfixedのサンプル。通常の表示と全く同じだが、画面スクロールしても同じ位置に表示される。







(relativeとabsoluteの例は次のページ以降で)

Sample Source......................................................................>>>

<div style="width:400px;border:1px solid navy">
  <p>position指定無し、通常の表示</p> 
</div>

<div style="position:static;width:400px;border:1px solid navy">
  <p>これはstaticのサンプル。通常の表示と全く同じ</p> 
</div>

<div style="position:fixed;width:400px;border:1px solid navy">
  <p>これはfixedのサンプル。通常の表示と全く同じだが、画面スクロールしても同じ位置に
    表示される。</p> 
</div>