ここがヘッダー

このページのヘッダのようにウィンド内でスクロールしても固定するにはCSSで position の指定をします。

position: fixed;
top: 0;

こんなかんじ

ブロックごとの重なりをつくるにはCSSで重なりを作るのも position の指定をします。

この下の例ではグレーと黄色と緑の要素(div)の3つがあってグレーの要素(div)の中に黄色と緑が入ってる入れ子状態です。

この緑のdivの部分のCSSの設定で

position: absolute;
top: 100px;
left: 100px;

と、指定してやり、それが入ってる上のdiv(親要素)には
position: absolute;

と、指定します。


position: absolute;

position: absolute;
top: 100px;
left: 100px;

さらに

transform: rotate(45deg);

角度つけることもできます。


position: absolute;

position: absolute;
top: 100px;
left: 50px;
transform: rotate(45deg);

さらに

box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);

影もつけられます。


position: absolute;

position: absolute;
top: 100px;
left: 50px;
transform: rotate(45deg);
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);


ということで、positionを使えるようになると、表現がすごい増えるで!