配置-絶対配置

次に、絶対配置について見ていきましょう。
相対配置では、現在の位置を基準にして配置しました。

絶対配置ではその名の通り絶対的な位置を基準にして、配置が行われます。
その位置はホームページ本体の左上の端、つまり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の位置へ配置されました。

絶対配置では、sample_4が少しでも動くと下に配置されていたsample_5が上へ詰めてきます。
これは絶対配置された場合、配置された要素のheightが元の場所に残らないためで、相対配置の場合は配置された要素のheightが元の場所に残るため、下の要素はそのまま留まることになります。

値の移動数字をマイナスにすると反対方向へ配置します。

基準となる点を変える

絶対配置の基準となる点を変えることができます。

配置したい要素の親要素にposition:relativeを設定すると、その要素が絶対配置の基準点になります。
例えば、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の位置へ絶対配置されました。