CSS #15 位置

2017年9月12日 2017年9月12日

こんにちは！
UPSTARTSのSベンです！

今回は「位置」についての内容です。

こちらのhtmlにスタイルをあてていきます。

<body>
    <div id="box1"></div>
    <div id="box2">
        <div id="box3"></div>
    </div>

    <p>ゴムゴム</p>
    <p>ヤミヤミ</p>
    <p>ゴロゴロ</p>
    <p>ピカピカ</p>
    <p>マグマグ</p>
    <p>ヒエヒエ</p>
    <p>グラグラ</p>
    <p>メラメラ</p>
    <p>ドクドク</p>
    <p>オペオペ</p>
    <p>イトイト</p>
    <p>カゲカゲ</p>
    <p>スナスナ</p>
    <p>ガスガス</p>
    <p>モクモク</p>
    <p>スケスケ</p>
</body>

<body>

</div>

ゴムゴム

ヤミヤミ

ゴロゴロ

ピカピカ

マグマグ

ヒエヒエ

グラグラ

メラメラ

ドクドク

オペオペ

イトイト

カゲカゲ

スナスナ

ガスガス

モクモク

スケスケ

</body>

position

position

位置を調整するには「position」プロパティを使います。

positionプロパティで指定できるのは、

static
relative
fixed
absolute

の4つになります。

ではそれぞれ見ていきましょう。

static

まずstaticですがこれが初期値になっていて、
位置を指定しないというものになります。

relative

位置ずらして表示したい時に使うのが、relativeになります。

#box1 {
    width: 100px;
    height: 50px;
    background: orange;
    position: relative;
    top: 10px;
    left: 10px;
}

#box1 {

width: 100px;

height: 50px;

background: orange;

position: relative;

top: 10px;

left: 10px;

}

topを10px、leftを10pxと指定していますので、
その位置にボックスが表示されるようなります。

fixed

次はfixedなんですが、
こちらはスクロールしても位置を固定したい時に使います。

配置はウィンドウの左上が基準になりますので、
先ほどのようにtopなどで指定した位置に配置されます。

#box1 {
    width: 100px;
    height: 50px;
    background: orange;
    position: fixed;
    top: 10px;
    left: 10px;
}

#box1 {

width: 100px;

height: 50px;

background: orange;

position: fixed;

top: 10px;

left: 10px;

}

このようにfixedとすると、スクロールしても位置が固定されています。

absolute

最後にabsoluteなのですが、
これは親要素のポジションが何かによって基準点が変わってきます。

親要素がstaticの時は、ウィンドウの左上が基準点になります。

今回は３つのボックスを使い、見ていきます。

body { margin: 0; }
#box1 { width: 100px; height: 50px; }
#box2 { width: 100px; height: 50px; }
#box3 { width: 50px; height: 25px; }

#box1 {
    background: orange;
}

#box2 {
    background: green;
    position: static;
}

#box3 {
    background: yellow;
    position: absolute;
    top: 10px;
    left: 10px;
}

body { margin: 0; }

#box1 { width: 100px; height: 50px; }

#box2 { width: 100px; height: 50px; }

#box3 { width: 50px; height: 25px; }

#box1 {

background: orange;

}

#box2 {

background: green;

position: static;

}

#box3 {

background: yellow;

position: absolute;

top: 10px;

left: 10px;

}

上記ではbox3にabsoluteを指定しました。
box3の親要素はbox2になるため、ウィンドウの左上が基準点になり、

box3はtopが10px、leftが10pxの位置に表示されます。

親要素box2の上に表示したい場合は、
box2をstatic以外に指定すればOKです。

先ほどのstaticをrelativeに変えます。

body { margin: 0; }
#box1 { width: 100px; height: 50px; }
#box2 { width: 100px; height: 50px; }
#box3 { width: 50px; height: 25px; }

#box1 {
    background: orange;
}

#box2 {
    background: green;
    position: relative;
}

#box3 {
    background: yellow;
    position: absolute;
    top: 10px;
    left: 10px;
}