Web’Notes

position:「static」「absolute」「relative」「fixed」の使い方

Rubik cube mobile di design By: Umberto Dattola

Webサイトを構築していると、稀に必要となってくるpositionプロパティ。

毎回、使おうと思うとどうやって使えばいいのか調べる羽目になってしまいます。

今回はそのposition:「static」「absolute」「relative」「fixed」の使い方をまとめました。

1. positionプロパティとは
2. positionプロパティの利用

positionプロパティとは

positionプロパティはボックス要素(divタグやaタグなど)の基準値を決めることができるプロパティです。

通常のWebページでは左上が基準値となり、ボックス要素は記載された順に上から並びます。

例えば、下のようにdivタグを2つ書くと、左上から1つ目、2つ目と順に並びます。

<div style="border:2px #000 solid;">
ボックス1
</div>
<div style="border:2px #000 solid;">
ボックス2
</div>

positionプロパティではこの左上から要素が配置される標準の基準値を変え、任意の場所にボックス要素を配置することができます。

positionプロパティの値は以下の4つがあります。

positionプロパティの利用

// ボックスサイズの加工
div{
    width:100px; 
    height:50px; 
    margin:10px;
    padding:10px;
    text-align:center;
    vertical-align: middle;
    border:2px #000 solid;
}
// fixedの定義
.fixed{
    position: fixed;
    bottom:0px; // 下:0px
    right:0px;  // 右:0px
}

<div class="fixed">ボックス1</div>
<div>ボックス2</div>

ボックス1に対して右下の位置を指定すると、このように常にウィンドウの右下に配置されます

// ボックスサイズの加工
div{
    width:150px;
    height:100px;
    text-align:center;
    vertical-align: middle;
    border:2px #000 solid;    // ボーダー2px
}
// relativeの定義
.relative{
    width: 100px;
    height:50px;
    position: relative;  
    top:50px;   // 上:50px
    left:50px;  // 左:50px
}

<div>
<div class="relative">ボックス2</div>
</div>

親ボックスに対して上から50px、左から50pxの位置を指定すると、このように親ボックスの右下に配置されます。
※positionを指定していない親ボックスは「static」扱いとなります。

「relative」で注意が必要なことは2点あり、一つ目は相対位置指定だということです。

「fixed」「absolute」はtop / bottom / left / rightで指定した位置にそのまま配置されますが、「relative」は本来配置されるべき位置(左上の位置)からの相対位置を指定する必要があるということです。

二つ目は、本来配置されるべき位置が文字やmargin/paddingなどに影響されるということです。

ボックス2のtopとleftを50pxずつ指定すると、width:100 + left:50 = 150 , height:50 + top:50 = 100 でぴったり右下に配置されるはずですが、border:2pxをしているため2px分位置がずれてしまいます。

例えば、先ほどと同じCSSを使用しHTMLを以下の様に書き換えて見ます。

<div>
ボックス1
<div class="relative">ボックス2</div>
</div>

「ボックス1」という文字を入れるとborderと文字の分の位置がずれます。

「relative」はこのように文字やプロパティなどに影響を受けるため、使用するときは注意してください。

// ボックスサイズの加工
div{
    width:150px;
    height:100px;
    text-align:center;
    vertical-align: middle;
    border:2px #000 solid;  // ボーダー2px
    padding:10px;
    margin:10px;
}
// relativeの定義
.relative{
    position: relative;  
}
// absoluteの定義
.absolute{
    position: absolute;
    bottom:0px; // 下:0px
    right:0px;  // 右:0px
    width:100px;
    height:50px;
}

<div class="relative">
ボックス1
<div class="absolute">ボックス2</div>
</div>

「absolute」はstatic以外の場合に有効となるため、親ボックスに「relative」を設定し、bottom:0px, right:0pxを指定すると、このような位置に配置されます。

「absolute」で注意が必要なことが一つあり、それは位置指定にborderとmarginを考慮する必要があるということです。(「relative」と違い文字やpaddingには影響を受けません。)

上の画像でもbottom:0px, right:0pxの位置を指定しているにもかかわらず、位置がずれているのは、margin:10px, border:2pxを取っているからです。

そのため、このようにCSSを書き直すとぴったりと右下に配置されます

// absoluteの定義
.absolute{
    position: absolute;
    bottom:-12px; // 下:-12px
    right:-12px;  // 右:-12px
    width:100px;
    height:50px;
}

marginとborderの分を合わせ12pxを引くとぴったりと右下に配置されます。

基本的にpositionを利用するときは、この「absolute」が最も多く使われます。

この機会にぜひ使い方を覚えてみてください。

CSS CSS, HTML, position