Zooloppaサイトをアレンジしよう（positionプロパティ使用）

前回と同じくZooloppaのサイトをアレンジしながら、 positionプロパティについてや検証ツールの便利な機能を紹介していきます。

今回は図のように、パンダの写真の上にnewというバッジ（ラベル）を加えます。 file

newバッジはcssの「position」というプロパティを使って配置します。講座で作成したZoloopaサイトのバックアップを取って、一緒にやってみてください。

positionプロパティとは

positionはプロパティ値を指定することで対象の要素をどのように配置するかを決定するcssプロパティです。もっと簡単に言ってしまえば、要素（divやpタグなど)を自分の好きな位置に持って来ることが出来るプロパティです。

例えば上図のような配置を作りたい場合。パンダの写真の上にnewを持ってこようとしてHTMLをこう書いたとします。

<article class="section">
    <div class="image">
        <div class="new">new</div>
        <img src="images/s_panda.png">
    </div>

    <div class="desc">
        <h3>パンダ</h3>
        <p>ジャイアントパンダは、哺乳綱食肉目クマ科ジャイアントパンダ属に分類される食肉類。白と黒にはっきりと分かれた体毛が際立った特徴である。</p>
    </div>
</article>

このHTMLを cssをほとんど指定していない状態で表示すると① 現在完成しているcssで表示すると②のような配置になります。 file

HTML文書は基本的に上から下、左から右の「Z」字に要素が配置されていきます。 flex-direction: row-reverseなど逆順指定も出来ますが、どちらにせよ規則的なブロック状に並びます。

しかし、positionプロパティを指定すると好きな位置に要素を持ってくることが出来ます。 positionプロパティの値は * static（デフォルト/文書の通常のフローに従って配置） * relative（通常の位置を基準に相対位置を指定） * absolute（親要素を基準に絶対位置を指定） * fixed（ブラウザウィンドウを基準に絶対位置を指定） * sticky（通常位置に配置→スクロールに応じて要素を固定表示する）

この５つがあります。 fixedとstickyの固定系は一旦置いておきまして、今回使用するのは position: relative; ・・・相対位置指定 position: absolute; ・・・絶対位置指定の２つです。

相対位置（relative）は何の指定もしない場合に配置される位置を基準に、「そこから○○px動かす」という指示をすることが出来ます。 file

絶対位置（absolute）はposition: static;以外が指定されている親もしくは祖先要素を基準にして、絶対位置で要素を配置します。fixedとstickyは少し特殊なので、装飾的に使用する場合は親要素にposition: relative;を設定して基準位置にすることが多いです。

.sectionをposition: relative;にして、子要素を絶対位置（absolute）指定すると file .sectionのボックスを基準に配置されます。