CSS 配置関連：position属性

概要

値	機能
static	基準設定無し(規定)
absolute	絶対位置配置
relative	相対位置配置
fixed	絶対位置配置。スクロールしても位置が固定

potision: absolute;

絶対位置配置
親ボックス： static以外(absolute,relative,fixed)
子ボックス： absolute
⇒親ボックスからの距離をtop,left,right,bottomで指定。
親ボックス： static
子ボックス： absolute
⇒<body>からの距離をtop,left,right,bottomで指定。

共通スタイル

↓基準(paernt1のtop)

parent1

child1

<div id="parent1" class="parent">
　　parent1
　　<div id="child1" class="child">
　　　　child1
　　</div>
</div>
<style type="text/css" >
　　#parent1 {
　　　　position: relative;
　　}
　　#child1 {
　　　　position: absolute;
　　　　top: 80px;
　　　　left: 20px;
　　　　parent1のtop,leftからの距離を指定
　　}
</style>

parent2

child2

↑基準(parent2のbottom)

<div id="parent2" class="parent">
　　parent2
　　<div id="child2" class="child">
　　　　child2
　　</div>
</div>
<style type="text/css" >
　　#parent2 {
　　　　position: relative;
　　}
　　#child2 {
　　　　position: absolute;
　　　　bottom: 100px;
　　　　parent2のbottomからの距離を指定(-100px上に配置される)
　　}
</style>

ここにchild4、child4の親タグを記述
<div style="position: relative;">

　　　　　←下の方で配置したボックス(child3)。
　　　　　←下の方で配置したボックス(child4)。

(上部参照)

parent3

child3

<div id="parent3" class="parent">
　　parent3
　　<div id="child3" class="child">
　　　　child3
　　</div>
</div>
<style type="text/css" >
　　#parent3 {
　　　　position: static;
　　}
　　#child3 {
　　　　position: absolute;
　　　　top: 0px;
　　　　親ボックス(なければ<body>)のtopからの距離を指定
　　　　position: staticの親は無視される？
　　}
</style>

親を指定しない場合
(上部参照)

child4

<div id="child4" class="child">
　　child4
</div>
<style type="text/css" >
　　#child4 {
　　　　position: absolute;
　　　　top: 80px;
　　　　親を指定しない場合：親＝<body>
　　　　親ボックス(なければ<body>)のtopからの距離を指定するのと同じ
　　}
</style>

potision: relative;

相対位置配置
親ボックス： static以外(absolute,relative,fixed)
子ボックス： relative
⇒親ボックスからの距離をtop,left,right,bottomで指定。
　子ボックスの元スペースは残る

parent5

child5

aaa
aaa

<div id="parent5" class="parent">
　　parent5
　　<div id="child5" class="child">
　　　　child5
　　</div>
　　aaa<br/>
　　aaa<br/>
</div>
<style type="text/css" >
　　#parent5 {
　　　　position: relative;
　　}
　　#child5 {
　　　　position: relative;
　　　　top: 0px;
　　　　left: 70px;
　　　　parent5という文字の下部からの距離を指定
　　}
</style>

parent6

child6

元位置

aaa
aaa

<div id="parent6" class="parent">
　　parent6
　　<div id="child6" class="child">
　　　　child6
　　</div>
　　aaa<br/>
　　aaa<br/>
</div>
<style type="text/css" >
　　#parent6 {
　　　　position: relative;
　　}
　　#child6 {
　　　　position: relative;
　　　　top: 50px;
　　　　left: 70px;
　　　　parent6という文字の下部からの距離を指定
　　　　対象(child6)が移動しても、元の位置のボックス分スペースが空く
　　}
</style>

parent7

child7-1

child7-2

元位置

aaa
aaa

<div id="parent7" class="parent">
　　parent7
　　<div id="child7" class="child">
　　　　child7-1
　　</div>
　　<div id="child7" class="child">
　　　　child7-2
　　</div>
　　aaa<br/>
　　aaa<br/>
</div>
<style type="text/css" >
　　#parent7 {
　　　　position: relative;
　　}
　　#child7-1 {
　　　　position: relative;
　　　　top: 50px;
　　　　left: 70px;
　　}
　　#child7-2 {
　　　　position: relative;
　　　　top: 30px;
　　　　left: 130px;
　　}
</style>

potision: fixed

絶対位置配置。スクロールしても位置が固定
⇒親ボックス(<body>)からの距離をtop,left,right,bottomで指定。
ページ上部参照

child9

<div id="child9" class="child">
　　child9
</div>
<style type="text/css" >
　　#child9 {
　　　　position: fixed;
　　　　top: 30px;
　　　　right: 10px;
　　}
</style>