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

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

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

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

スポンサーリンク

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

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

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

static 配置指定なし。通常の位置に要素が配置される。(初期値)
absolute 絶対位置を表し、ウィンドウ、または親要素を基準に要素が配置される。
relative 相対位置を表し、本来その要素が配置される場所を基準に要素が配置される。
fixed absoluteと同じく絶対位置を表し、ウィンドウ、または親要素を基準に要素が配置される。
スクロールしても位置が変わらない。(固定配置)

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

まずはこの記事で利用する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プロパティの使い方-指定なし
のような感じになります。

position:absoluteの使い方

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

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

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

すると
positionプロパティのabsoluteの使い方
のようにbox2が親要素のトップ(top:0,left:0)の位置からずれた位置に表示されました。

「position: absolute」が指定されるとずれた要素より後のものはbox2が本来表示されるべき位置にずれて表示されます。

これを利用してbox2をトップ(top:0,left:0)にずらして少し小さくすれば
position:absoluteを使ってBOXにタイトルをつける
よくある「ボックスにタイトルをつける」みたいなことができます。

position:relativeの使い方

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

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

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

結果は
position: relativeで親要素から表示位置をずらす
のようになります。

「position:absolute」と違うのは

「position:relative」が指定されるとずれた要素より後のものは影響を受けずが本来表示されるべき位置に表示されます。

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

まとめ

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

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

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

スポンサーリンク
スポンサーリンク
CSS
このサイトをフォローする
スポンサーリンク
ソフトウェア開発日記
タイトルとURLをコピーしました