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

Rubik cube mobile di design By: Umberto Dattola
Webサイトを構築していると、稀に必要となってくるpositionプロパティ。
毎回、使おうと思うとどうやって使えばいいのか調べる羽目になってしまいます。
今回はそのposition:「static」「absolute」「relative」「fixed」の使い方をまとめました。
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つがあります。
static | : | 基準値の設定を行わない(デフォルトの左上を基準値とする) |
---|---|---|
fixed | : | 絶対位置指定。ウィンドウに対して絶対位置を決め、スクロールを行っても位置は固定されたままとなる(ウィンドウの左上が基準値となります) |
absolute | : | 絶対位置指定。親のボックス要素に対して絶対位置を決めます(親のボックス要素の左上が基準値となります) ※親ウィンドウにstaticが設定されている場合は、親のボックス要素に対しての絶対位置指定は行いません(親のボックス要素のさらに親が基準値となります) |
relative | : | 相対位置指定。親のボックス要素にstaticが設定されている場合、親のボックス要素の左上が基準値となります。 |
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>

// ボックスサイズの加工 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>
※positionを指定していない親ボックスは「static」扱いとなります。

「relative」で注意が必要なことは2点あり、一つ目は相対位置指定だということです。
「fixed」「absolute」はtop / bottom / left / rightで指定した位置にそのまま配置されますが、「relative」は本来配置されるべき位置(左上の位置)からの相対位置を指定する必要があるということです。
二つ目は、本来配置されるべき位置が文字やmargin/paddingなどに影響されるということです。
親ボックス | : | width:150 | , height:100 |
---|---|---|---|
ボックス2 | : | width:100 | , height:50 |
ボックス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>

「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」で注意が必要なことが一つあり、それは位置指定に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; }

基本的にpositionを利用するときは、この「absolute」が最も多く使われます。
この機会にぜひ使い方を覚えてみてください。
Related Posts

« Photeshopの代わりに使える!! 無料の画像編集ソフト「GIMP」のインストール ページごとにCSSやJavaScriptの設定ができるWordPressプラグイン「CSS & JavaScript Toolbox」 »
Trackback URL
http://webnonotes.com/css/cssposition/trackback/No Comments Yet