Webページを作るにあたり、css要素を一つずつ調べて使うのもいいのですが、

Css要素をある程度知っておくととても便利です。

今回はよく使うcss要素をまとめて見ましたので紹介します。

（目次）
■ positionプロパティーについて
■ static （静的配置）
■ relative （相対配置）
■ absolute （絶対配置）
■ fixed （固定配置）

■ positionプロパティーについて
position プロパティ : ボックスの配置位置を決めるためのボックスの配置方法を指定します。
positionプロパティで指定するのは、配置方法（基準位置）のみです。

基準値の指定できる値には、static・relative・absolute・fixed があります。
実際の表示位置の指定には、top・bottom・left・right を併用して、
基準位置からの距離を設定します。

以下で詳しく紹介していきます。

■ static （静的配置）static : 特に配置方法を指定しません。
つまり、position プロパティを指示しない通常の配置方法と同じになります。
この値のときには、top、bottom、left、rightは適用されません。
『これが初期値です。』

ブロック要素（h、p など）の場合、
親ボックスの最上部から順に下に 配置されていきます。
インライン要素（em、span など）は、
行ボックスの中で水平方向に左から右に順に配置されます。

position プロパティを指定しないときは、static が初期値として選択されています。

■ relative （相対配置）

relative : 最上位の左側が基準になります。
static と同じように、上から下に通常の配置に従いますが、
相対的に top、bottom、left、right などの
プロパティを併用してずらして配置する相対配置です。

※よく絶対配置の基準点をつくるために、
親要素として relative 配置をする使われ方もします。
絶対配置で詳しく説明していきます。

右に 50px（left: 50px;）、下に 20px （top: 20px;）
位置をずらした例です。
〇〇　{
position : static;
left : 50px; top : 20px;
}

■ absolute （絶対配置）
absolute : position プロパティを使って段組を作る場合に、
基準になるボックスとして重要な役割を担います。
absolute 指定のボックスは、通常の配置とは独立して扱われます。
例えば、配置したところに他のボックスなどがあってもそのまま 重なって表示されます。

・absolute を指定したボックスの親ボックスとなるのは、
static 以外の値が指定されているボックスです。
・親ボックスが ない場合は、画面の表示領域が配置の基準点になります。

配置位置は、親ボックスを基点として、top、left、right、bottom などの
プロパティを用いて配置する絶対配置です。

右に ４0px（left: ４0px;）、下に ４0px （top: ４0px;） 位置をずらした例です。
〇〇　{
position : absolute;
left : 40px;
top : 40px;
}

■fixed （固定配置）
fixed : スクロールしても、常に同じ位置に表示され固定されます。
この値を指定したボックスは、absolute を指定したときと同じ仕組みで配置されます。

absolute と異なる点は、配置位置が画面表示領域に対して固定されます。
従って、画面のスクロールバーでスクロールしても、
常に同じ位置に表示され固定されます。
メニューバーなどによく使われています。

メニューバーの例

header {
position : fixed ;
}

下にスクロールしても👇