CSSのpositionプロパティのabsoluteとrelativeの使い方

CSSのpositionプロパティを利用すると要素を本来表示されるべき位置からずらして表示させることができます。

これが使えるとHTMLの要素と要素を重ねたり、離して表示したりできるようになります。

ただこのpositionプロパティのabsoluteとrelativeがけっこう使うの難しいので、今回はきちっりと勉強することにしました。

positionプロパティのabsoluteとrelativeの使い方

CSSのpositionプロパティは要素の位置（表示位置）を指定するためのプロパティで、値に「absolute」、「relative」、「static」と「fixed」が指定できます。

それぞれの意味は以下の通りです。

この記事で利用する固定の設定

まずはこの記事で利用するCSSとHTMLを示しておきます。
【CSS】

.parent{
    position: absolute;
    top:50px;
    left:50px;
}
.box-size{
    width:300px;
    height:100px;
}
.box1{
    background: skyblue;
}
.box2{
    background: yellow;
}
.box3{
    background: red;
}
.box4{
    background: lightgreen;
}

【HTML】

    <div class="parent">
        <div class="box-size box1">box1</div>
        <div class="box-size box2">box2</div>
        <div class="box-size box3">box3</div>
        <div class="box-size box4">box4</div>
    </div>

これを表示すると

のような感じになります。

position:absoluteの使い方

position:absoluteの使い方は要素をページまたは親要素のトップ(top:0,left:0）の位置を基準にどれだけ離れたところへ表示するかやってみます。

試しにbox2を親要素から「top:40px;left:50px;」の位置に表示してみます。

.box2{
    background: yellow;
    position: absolute;
    top: 40px;
    left:50px;
}

すると

のようにbox2が親要素のトップ(top:0,left:0）の位置からずれた位置に表示されました。

これを利用してbox2をトップ(top:0,left:0）にずらして少し小さくすれば

よくある「ボックスにタイトルをつける」みたいなことができます。

position:relativeの使い方

position:relativeは要素が本来表示されるべき位置からどれだけ離れたところへ表示するかをしていします。

position:absoluteと同じようにbox2を親要素から「top:40px;left:50px;」の位置に表示してみます。

.box2{
    background: yellow;
    position: relative
    top: 40px;
    left:50px;
}

結果は

のようになります。

「position:absolute」と違うのは

ということです。
（absoluteの時のように詰まりません。）

まとめ

position:absoluteは「親要素からのずれた位置に要素を配置するか」、position:relativeは「本来表示される位置からどれだけずれた位置」を表現するプロパティです。

position:absoluteとposition:relativeで、それ以降の要素への影響が異なることに注意しましょう。

以上、CSSのpositionプロパティのabsoluteとrelativeの使い方でした。