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)

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>

次の記事

CSS 背景関連