デザインによって複雑なレイアウトを作るには、positionプロパティを使う必要あります。
positionプロパティには「absolute」「relative」「fixed」「static」があり、static以外のpositionプロパティを使用する場合は、top, bottom, left, rightのプロパティを必要に応じて併用します。そうすることで、ボックスの配置方法、上下左右の距離を指定します。
今回は１つ１つの違いをご説明します。
static
staticはデフォルト値になります。配置方法を指定せず、（top, bottom, left, right）が適用されなくなり、配置は初期値、通常の位置になります。
absolute
absoluteは絶対位置の配置になります。親要素やウィンドウを基準に位置を指定します
relative
relativeは相対位置の配置になります。absoluteを指定したボックスがある場合は、absoluteを指定したボックスを基準として位置を指定します。
absoluteを指定したボックスがない場合の位置の指定は、元々の配置が基準になります。つまり、relativeを使用すると、元々の位置またはabsoluteを指定したボックスから、指定された距離の場所に配置することができるということです。
fixed
これは、absoluteと同じく絶対位置の配置になりますが、大きく違う点があり、fixedの場合はスクロールしても位置が変わりません。
また、基準はウィンドウになり、位置は固定されます。
