.hogebox{ 
 width: 800px;        /* 親boxの幅 */
 height: 350px;       /* 親boxの高さ */
 position: relative;  /* 親boxをレイアウトから独立させる */
 border: solid 1px;   /* 枠線を表示 */
 text-align: left;    /* テキストを左寄せ */
 margin: 20px auto ;  /* 親boxを中央寄せ */
}

.hoge {
 position: static;    /* 通常の要素の表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge2 {
 position: relative;  /* 元の位置を基点として表示位置を指定 */
 left:30px;           /* 元の位置の左から30pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge3 {
 position: absolute;  /* ページの内で自由に配置 */
 top:100px;           /* ページの上から100pxの位置に表示 */
 left:100px;          /* ページの上から100pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge4 {
 position: fixed;     /* 要素の位置を固定表示 */
 top:300px;           /* ページの上から300pxの位置に表示 */
 left:400px;          /* ページの左から400pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }
.hoge5 {
 position: absolute;  /* ページの内で自由に配置 */
 top:250px;           /* ページの上から250pxの位置に表示 */
 left:100px;          /* ページの上から100pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

<div class="hoge5">position: absolute; top:250px;  left:100px; 
<br>親ブロック要素なしの場合はページの端を基点にして配置されます
</div>
<div class="hogebox">
<p>親ブロック</p>
<div class="hoge">position: static;　初期値です</div>
<div class="hoge2">position: relative; left:30px;元の表示位置から  left:30pxずらしました</div>
<div class="hoge3">position: absolute;  top:100px; left:100px;
<br>親ブロック要素の左から100px、上から100pxの位置に配置
<br>親ブロック要素にposition: relative;を指定し、子ブロック要素にposition: absolute;を指定すると
<br>親ブロック要素を基点にして子ブロック要素の位置を指定できます</div>
<div class="hoge4">position: fixed;　ページの左から300px、上から300pxの位置に配置、スクロールしても固定されます</div>
</div>