ポジションの練習

1:relative(相対位置)とabsolute(絶対位置)

ただのblockです(親子関係なし)。position:static*初期値

1:
position:relative(相対位置)
top20/left20

1:
position:absolute(絶対位置)
top10/right10

1.#position1 #relative1に{position: relative; top: 20px; left: 20px;}を設定: →ピンクが元の位置から相対的に右に20px、下に20px動く。
自分が本来いるべき位置からの相対位置。
2.#position1 #absolute1に{position: absolute; top: 10px; right: 10px;}を設定: →水色がブラウザの右隅、上から10px、右から10pxのところに移動する

親要素にpositionが指定されていない場合、absoluteの起点は画面の角からの指定になります。

親のblockです。position:static*初期値

02
position:relative(相対位置)
top30/left30

02
position:absolute(絶対位置)
top20/right20

1.#position2 #relative2に{position: relative; top: 30px; left: 30px;}を設定: →ピンクが元の位置から相対的に右に30px、下に30px動く。
自分が本来いるべき位置からの相対位置。
2.#position2 #absolute2に{position: absolute; top: 20px; right: 20px;}を設定: →水色がブラウザの右隅、上から20px、右から20pxのところに移動する
3.#position2 #block2に{position: relative;}を設定: →水色のブロックが親要素の右から20px、下から20pxの位置に動く。

親要素にrelativeかfixedを指定すると、absoluteの起点は親要素の端になります。

03
absolute(絶対位置)
top30/right30

03
fixed（固定）
top50/right0

1.#position3 #absolute3に{position: absolute; top: 30px; right: 30px;}を設定: →水色がブラウザの右隅、上から30px、右から30pxのところに移動する
2.#position3 #fixed3に{position: fixed; top: 50px; right: 0;}を設定: →黄色が右端上から50pxの位置に移動し、スクロールしてもずっとそこにある

両方とも絶対位置の表示ですが、fixed（不動？）はスクロールしても位置が変わりません。

親のblockです。fixed（不動？）を指定

04-1
position:absolute(絶対位置)
top50/left50

04-2
position:absolute(絶対位置)
top80/left100

1.#position4 #block4に{ position: fixed; bottom: 0; left: 0;}を設定: →グレーの枠が広がり、最下部に固定される。
2.#position4 #absolute4-1に{ position: absolute; top: 50px; left: 50px; z-index:1;}を設定: →水色が親要素の左から50px、下へ50pxのところへ移動
3.#position4 #absolute4-2に{ position: absolute; top: 80px; left: 100px; z-index:2;}を設定: →黄色のブロックが親要素の右から80px、下から100pxの位置に動く。
4.#position4 #absolute4-1のz-index:を3に設定: →水色ブロックが黄色のブロックの上に重なる。

z-indexの値を変更することで前後の入れ替えが可能です。