次に、絶対配置について見ていきましょう。
相対配置では、現在の位置を基準にして配置しました。
絶対配置ではその名の通り絶対的な位置を基準にして、配置が行われます。
その位置はホームページ本体の左上の端、つまりbodyの左上の1点で、そこが0基準になり配置されます。
絶対配置
画像を見てください。
黒枠はbody、中央はcontainerで、画像が2枚あります。
htmlソース
<body> <div id="container"> <div class="sample_4"> <p>sample_4</p> </div> <div class="sample_5"> <p>sample_5</p> </div> </div><!--container--> </body>
cssソース
/*====css参考====*/ .sample_4 { width:100px; height: 100px; background: pink; } .sample_5 { width:100px; height: 100px; background: #ff5a77; }
sample_4
sample_5
sample_4を左から10%、上から150pxの位置へ配置してみます。
先の通り、bodyの左上が基準です。
sample_4のスタイルに3行追加しました。
cssソース
/*====css参考====*/ .sample_4 { width:100px; height: 100px; background: pink; position: absolute; /*追加*/ left: 10%; /*追加*/ top: 150px; /*追加*/ }
値absoluteは絶対位置からの配置です。
そして、移動位置を書きます。
left,right,top, bottom左右と上下の組み合わせは自由です。
sample_4
sample_5
図のようにbodyの左から10%、上から150pxの位置へ配置されました。
これは絶対配置された場合、配置された要素のheightが元の場所に残らないためで、相対配置の場合は配置された要素のheightが元の場所に残るため、下の要素はそのまま留まることになります。
値の移動数字をマイナスにすると反対方向へ配置します。
基準となる点を変える
絶対配置の基準となる点を変えることができます。
例えば、containerにposition:relativeを設定するとcontainerの左上が絶対配置の基準点になります。
containerにposition:relativeを設定して、sample_4を左へ10%、上から40pxの位置へ絶対配置してみましょう。
htmlは同じです。
cssソース
/*====css参考====*/ #container { width: 70%; min-height: 100%; margin: 0 auto; position: relative; /*追加*/ } .sample_4 { width:100px; height: 100px; background: pink; position: absolute; /*追加*/ left: 10%; /*追加*/ top: 40px; /*追加*/ }
sample_4
sample_5
containerにposition: relativeを設定したので、containerの左上が絶対配置の基準点になり、そこから左へ10%、上から40pxの位置へ絶対配置されました。