position「要素の配置方法」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_position_static{
  position : static;
  top      : 10px;
  left     : 20px;
}
.css_position_relative{
  position : relative;
  top      : 10px;
  left     : 20px;
}
.css_position_fixed{
  position : fixed;
  top      : 10px;
  right    : 20px;
}
.css_position_absolute{
  position : absolute;
  top      : 10px;
  left     : 20px;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">position : static;</div>
  <div class="css_position_static">
  通常の位置に配置。top,right,bottom,leftの適用なし。
  </div>

  <div class="cssTitle">position : relative;</div>
  <div class="css_position_relative">
  通常の位置から、top,right,bottom,leftで指定した分だけ相対的に移動。
  </div>

  <div class="cssTitle">position : fixed;</div>
  <div class="css_position_fixed">
  絶対位置へ配置。スクロールしても位置は固定。
  </div>

  <div class="cssTitle">position : absolute;<br>親要素 position:static(指定なし)</div>
  <div class="css_position_absolute">
  ウィンドウ枠の左上が基準位置となり、top,right,bottom,leftで指定された絶対位置に配置。
  </div>

  <div class="cssTitle">position : absolute;<br>親要素 position:relative</div>
  <div style="position:relative">
  <div class="css_position_absolute">
  親要素の左上が基準位置となり、top,right,bottom,leftで指定された絶対位置に配置。
  </div>
  </div>
</div>