CSS 配置関連：position属性
概要
| 値 | 機能 |
|---|---|
| static | 基準設定無し(規定) |
| absolute | 絶対位置配置 |
| relative | 相対位置配置 |
| fixed | 絶対位置配置。スクロールしても位置が固定 |
potision: absolute;
絶対位置配置
親ボックス ： static以外(absolute,relative,fixed)
子ボックス ： absolute
⇒親ボックスからの距離をtop,left,right,bottomで指定。
親ボックス ： static
子ボックス ： absolute
⇒<body>からの距離をtop,left,right,bottomで指定。
共通スタイル
<style type="text/css" >
.parent {
width: 100px;
height: 100px;
border: 1px solid #888;
}
.child {
width: 50px;
height: 50px;
border: 1px solid gray;
}
</style>
↓基準(paernt1のtop)
<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の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;">
←下の方で配置したボックス(child4)。
(上部参照)
<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>
親を指定しない場合
(上部参照)
<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で指定。
子ボックスの元スペースは残る
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>
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>
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で指定。
ページ上部参照
<div id="child9" class="child">
child9
</div>
<style type="text/css" >
#child9 {
position: fixed;
top: 30px;
right: 10px;
}
</style>
Follow me!
