応用58. 要素の配置方法の指定のプロパティ（position）

position: static;

相対位置（relative）と絶対位置（absolute, fixed）を使用しない指定。主に、相対位置と絶対位置の解除に使用します。

position: relative;

相対位置の指定。現在の位置からの相対的な位置指定を行います。
元の座標のwidth, height, margin, padding は保持され、表示位置だけをずらします。
下記は、.box02の要素を元の位置から右に50px、下に50pxずらした状態です。元の位置のwidth, height, margin, padding は保持されているので、前後の要素の位置は変わりません。

<div class=wrap>
  <div class="box01">box01</div>
  <div class="box02">box02</div>
  <div class="box03">box03</div>
</div>

.wrap{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ddd;
}
.box01,
.box02,
.box03{
  width: 300px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
.box01{
  background-color: #f00;
}
.box03{
  background-color: #ff0;
}
.box02{
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #aaa;
  position: relative;
  left: 50px;
  top: 50px;
}

position: absolute;

絶対位置の指定。レイアウト（body）を基準にします。
親要素をさかのぼり、相対位置（relative）または絶対位置（absolute, fixed）の指定がある場合、その親要素を基準とします。
元の座標のwidth, height, margin, padding は保持されず、表示位置もずらします。また、absoluteを指定した要素が、ブロックレベル要素（div, h1〜h6, pなど）の場合、親要素から幅を継承しません。
下記は、.wrapに相対位置の指定をして、その位置から.box02の要素を右に50px、下に50pxずらした状態です。元の位置のwidth, height, margin, paddingは保持されないので、.box01の後に.box03が続きます。

<div class=wrap>
  <div class="box01">box01</div>
  <div class="box02">box02</div>
  <div class="box03">box03</div>
</div>

.wrap{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ddd;
  /* 相対位置 */
  position: relative;
}
.box01,
.box02,
.box03{
  width: 300px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
.box01{
  background-color: #f00;
}
.box03{
  background-color: #ff0;
}
.box02{
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #aaa;
  /* .wrapからの絶対位置 */
  position: absolute;
  left: 50px;
  top: 50px;
}

position: fixed;

絶対位置の指定。ウインドウを基準にします。
absoluteと違い、親要素に相対位置（relative）、絶対位置（absolute, fixed）が指定されていても基準にしません。absoluteと同じく、元の座標のwidth, height, margin, padding は保持されません。表示位置もずらします。fixedを指定した要素が、ブロックレベル要素（div, h1〜h6, pなど）の場合、親要素から幅を継承しません。
また、ウインドウをスクロールしてもその位置は保持される特徴があります。
下記は、.box02の要素をウインドウから右に50px、下に50pxずらした状態です。スクロールしても位置が変わりません。

<div class=wrap>
  <div class="box01">box01</div>
  <div class="box02">box02</div>
  <div class="box03">box03</div>
</div>

.wrap{
  width: 500px;
  /* スクロールさせるため、高さを指定 */
  height: 2000px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ddd;
}
.box01,
.box02,
.box03{
  width: 300px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
.box01{
  background-color: #f00;
}
.box03{
  background-color: #ff0;
}
.box02{
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #aaa;
  /* ウインドウからの絶対位置 */
  position: fixed;
  left: 50px;
  top: 50px;
}