CSS初心者必見!?本気でPositionプロパティを解説してみた

さて今回は、CSSのPositionプロパティの使い方について優しく解説します。

とその前に軽く自己紹介しようと思います！

どうも初めまして！最近IT業界に飛び込んだむねりんです！前職は、建設会社でトンネルとか高速道路の現場で施工管理をしていました。転職するきっかけになったのは、自分でモノを作ってみたい、幼い頃からよくPCを触っていたので少しでも活かしたいと思ったのがきっかけです。
そして今現在html,css,jsを勉強中ですがやはり簡単ではないです。難しい・・・。でも楽しい！まだまだたくさん学ぶことはありますが頑張ります！

では本題に入ります。

初めてサイトを作る際に、こんなことに困ったことがあるはず

「ボックスの位置を変えたい・・・・」

「画像の中にboxを配置したい・・・。」

「スクロールした時フッターがついてくるように固定したい・・・。」

だからと言ってmarginやpaddingを多用するのもなぁ・・・

結論から言うとPositionプロパティで簡単に解決できちゃいます。では目次の順に追って解説していきたいと思います。

Positionとは？

ボックスの配置方法(基準位置)を指定するプロパティです。
表示位置の指定方法としては、top、right、bottom、leftプロパティを組み合わせることにより、基準位置から距離を指定することができます。
また初期値としてはstaticという値が設定されています。
後ほど種類のところで説明しますが値と組みわせることにより容易に位置を変えることができます。

Positionの種類

Positionプロパティには主に以下の４つの設定があります。

次で各positionの使い方を優しく解説していきます。

各Positionの使い方(優しく解説)

では、実際にソースコードを用いて優しく解説していきます。

position: static;

それではposition:static;の使い方について解説します

　/*css記述*/
.box{
    background: pink;
    width: 100px;
    height: 100px;
    position: static;
}　　　　　　　　

<!-- html記述 -->
<div class="box">
     position:static;　　　　　
</div>

このように初期値なので左上の方に表示されます。それでは次に進みます。

position: relative;

続いてposition: relativeについて解説していきます。

/*css記述*/
.box{
    background: pink;
    width: 100px;
    height: 100px;
}
.box2{
    background: yellow;
    width: 100px;
    height: 100px;
    position: relative;
    top: 100px;
    left: 100px;
} 　　　　　　　　

<!-- html記述 -->
<div class="box">
    <div class="box2">
    position:relative;
　  </div>　　　
</div>

このようにピンクのボックスを初期位置とした時、黄色のインナーボックスにposition:relative;とtop,leftを指定すると位置を変更することができます。

実際にコードを記入して試してみましょう！！！

position:absolute

続いてはposition:absoluteについて解説していきます。

/*css記述*/
.box{
    background: pink;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
}

<!-- html記述 -->
<div class="box">
     position:
     absolute;
     bottom:0;
     right:0;
</div>

水色の枠がブラウザ全体の範囲とすると絶対位置であるposition: absoluteはブラウザ左上の基準位置からposition:absolute;とbottom:0;とright:0;を指定することにより画面右下に変更することができます。

親要素にstatic以外の値を設定している場合は、親要素の左上が基準位置となります。
それでは親要素をrelative、子要素をabsoluteに指定して例を見ていきましょう。

/*css記述*/
.boxmain{
    background: yellow;
    width: 300px;
    height: 300px;
    position: relative;
}
.box{
    background: pink;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
}

<!-- html記述 -->
<div class="boxmain">
    position:relative;
    <div class="box">
    position:
    absolute;
    bottom:0;
    right:0;
    </div>
</div>

このように親要素にrelative、子要素にabsoluteとbottom:0;、right:0を指定してあげると黄色のボックスの左下にピンクのボックスが配置されます。

これを用いる事で画像を親要素にすると中にボックスを配置する事ができます！

position: fixed;

最後にposition:fixedについて説明します。

absoluteと同様に、通常の配置から外れて、親要素を基準点とした位置に強制的に配置されます。

position:fixed;の特徴としては、スクロールしても位置が固定されたままという点です。では動画を見ていきましょう。

/*css記述*/
.headerbox{
    width: 100%;
    height: 50px;
    font-size: 30px;  
    background: green;
    position: fixed;
}

<!-- html記述 -->
<header>
    <div class="headerbox">
    position:fixed; 固定
    </div>
</header>
<!-- 以下略 -->

このように下へスクロールしても緑色のヘッダーは、固定されついていきます。

サイトを作る際は、使用することもあると思うので覚えておきましょう！！

まとめ

それでは今回解説したpositionプロパティの使い方について少しまとめます。

ということで今回はpositionについてちょっと本気で解説してみました！　　　

positionを覚えることで多彩なレイアウト調整が可能となるのでぜひ覚えて積極的に使いましょう！！！