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

Rubik cube mobile di design By: Umberto Dattola

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

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

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

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

positionプロパティとは

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

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

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

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

box1

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

positionプロパティの値

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

static基準値の設定を行わない(デフォルトの左上を基準値とする)
fixed絶対位置指定。ウィンドウに対して絶対位置を決め、スクロールを行っても位置は固定されたままとなる(ウィンドウの左上が基準値となります)
absolute絶対位置指定。親のボックス要素に対して絶対位置を決めます(親のボックス要素の左上が基準値となります)
※親ウィンドウにstaticが設定されている場合は、親のボックス要素に対しての絶対位置指定は行いません(親のボックス要素のさらに親が基準値となります)
relative相対位置指定。親のボックス要素にstaticが設定されている場合、親のボックス要素の左上が基準値となります。

positionプロパティの利用

fixed
CSS
// ボックスサイズの加工
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
}
HTML
<div class="fixed">ボックス1</div>
<div>ボックス2</div>
ボックス1に対して右下の位置を指定すると、このように常にウィンドウの右下に配置されます
fixed
relative
CSS
// ボックスサイズの加工
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
}
HTML
<div>
<div class="relative">ボックス2</div>
</div>
親ボックスに対して上から50px、左から50pxの位置を指定すると、このように親ボックスの右下に配置されます。
※positionを指定していない親ボックスは「static」扱いとなります。
relative

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

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

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

上記でボックス2の位置が親ボックスに対して若干ずれているのもそのためです。

親ボックスwidth:150, height:100
ボックス2width:100, height:50

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

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

HTML
<div>
ボックス1
<div class="relative">ボックス2</div>
</div>
「ボックス1」という文字を入れるとborderと文字の分の位置がずれます。
relative2

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

absolute
CSS
// ボックスサイズの加工
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;
}
HTML
<div class="relative">
ボックス1
<div class="absolute">ボックス2</div>
</div>
「absolute」はstatic以外の場合に有効となるため、親ボックスに「relative」を設定し、bottom:0px, right:0pxを指定すると、このような位置に配置されます。
absolute

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

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

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

CSS
// absoluteの定義
.absolute{
    position: absolute;
    bottom:-12px; // 下:-12px
    right:-12px;  // 右:-12px
    width:100px;
    height:50px;
}
marginとborderの分を合わせ12pxを引くとぴったりと右下に配置されます。
absolute2

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

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

divider

Trackback URL

http://webnonotes.com/css/cssposition/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>