始めに
CSSにおいて配置に関係するプロパティはコーディングを学んでいくにあたって、最初につまずきやすいものとなっています。そこで今回は配置に関係するプロパティの中のpositionについて説明していきたいと思います。
positionとは？
要素の表示位置を指示するプロパティです。ボックスの配置方法、基準位置を指定するもので、値は主にstatic、relative、absolute、fixedの4つを使いその後に、top、bottom、left、right併用して要素の位置指定を記述します。値の４つの違いは以下の通りです。
static
通常の位置に配置する初期値（デフォルト）です。この値を記述した場合、特に配置方法を指定することはできません。top、bottom、left、rightを記述しても適用されません。
relative
通常の位置を基準点にした相対位置へ配置する値です。staticを指定した場合に表示される位置が基準とし、top、bottom、left、rightのプロパティを併用して位置指示の記述をします。
absolute
親要素を基準ボックスとした絶対位置への配置をする値です。親要素にpositionプロパティのstatic以外が指定されている場合には、親ボックスの左上が初期の基準位置となり、親ボックスにpositionプロパティの値が指定されていない場合には、ウィンドウ全体の左上が初期の基準位置となります。
fixed
ウィンドウを基準とした絶対位置への配置となります。考え方はabsoluteと似ていますが、スクロールしても要素の位置がウィンドウに対して固定されたままになり、追従要素となります。
positionと合わせて使用するプロパティについては以下の様に考えていきます。
topプロパティ
top：（値）；
要素のtop（上）から下へ〇〇（値）移動
bottomプロパティ
bottom：（値）；
要素のbotton（下）から上へ〇〇（値）移動
leftプロパティ
left：（値）；
要素のleft（左）から右へ〇〇（値）移動
rightプロパティ
right：（値）；
要素のright（右）から左へ〇〇（値）移動
z-indexプロパティ
z-index:（値）；
要素の重なる順番（値の数字が大きい方が上になる）
それでは、各値について詳しく説明していきます。
relative
通常の位置を基準にしてtop、bottom、left、rightを併用して位置の指示をします。
＜例＞
.relative_sample01{
position: relative;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: #f00;
}
上記の様に記述することで、通常の位置から下へ100px、右へ100px移動します。このように通常の位置から、配置する位置への移動距離を値に記述することで位置を指定することが出来ます。
ここで注意ですが、relativeは本来配置されるはずの場所が確保されたまま移動するので、relative要素の後の要素は基準位置のスペースを空けて配置されます。
absolute
親のボックス要素を基準とした配置なので、以下の様に記述された場合、親要素のrelativeが反映され、親要素の上から100px下へ、左から100px右への移動となります。基本的にこの場合は基準位置が左上になることが多いのでrelativeとの違いが分かりにくいかもしれません。
＜例1＞
.relative_sample01{
position: relative;
width: 1000px;
height: 1000px;
background: #f00;
.relative_sample02{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: #f00;
}
}
もう一つ例を見てみましょう
＜例1＞
.relative_sample01{
position: relative;
width: 1000px;
height: 1000px;
background: #f00;
.relative_sample02{
position: absolute;
bottom: 100px;
right: 100px;
width: 100px;
height: 100px;
background: #f00;
}
}
上記の場合absoluteがrelativeと比べて大きく違うのは、親要素のrelativeが基準となるため、bottomは親要素の底（bottom）から上に100px、親要素の右（right）から左に100pxの場所へ位置を指定することになります。absoluteを記述する場合は、親要素にpositionプロパティを忘れず記述しましょう。
fixed
absoluteと考え方は近いですが、基準がウィンドウになります。主に追従要素があるページに使用していきます。ウインドウが基準なため、画面のサイズやデザインによって異なる位置へ配置されているように見える場合もあります。
＜例＞
header {
position: fixed;
top: 0;
left: 0;
height: 50px;
background-color: white;
width: 100%;
}
上記の様に記述するとウィンドウに対して高さ50pxの追従ヘッダーになります。
＜例2＞
footer {
position: fixed;
bottom: 0;
left: 0;
height: 50px;
background-color: white;
width: 100%;
}
上記の場合は追従フッターになります。
z-index
要素が複数重なる配置をする場合、z-indexに値を記述することで、重なる順番を指示することができます。例えば、3つの要素に対して以下のようにそれぞれ3つのクラスをつけると
＜例1＞
.z_sample01{
position: absolute;
top: 100px;
left: 100px;
width: 150px;
}
.z_sample02{
position: absolute;
top: 100px;
left: 200px;
width: 150px;
}
.z_sample03{
position: absolute;
top: 100px;
left: 300px;
width: 150px;
}
この場合は、後に書かれた要素が上になるので、重なり順が01＜02＜03となります。そこでz-indexプロパティで以下のように記述を足します。
＜例2＞
.z_sample01{
position: absolute;
top: 100px;
left: 100px;
width: 150px;
z-index: 3;
}
.z_sample02{
position: absolute;
top: 100px;
left: 200px;
width: 150px;
z-index: 2;
}
.z_sample03{
position: absolute;
top: 100px;
left: 300px;
width: 150px;
z-index: 1;
}
以上のように記述すると、01＞02＞03となり、.z_sample01のクラス名要素や画像が1番上に重なるようになります。
まとめ
positionプロパティを編集する際、要素があちらこちらに行ってうまくいかない！と思うことがあるかもしれませんが、まずは、値を見直して、親要素のpositionプロパティを踏まえて考えていくといいかもしれません。まずは、positionプロパティーの記述の仕組みについてきちんと理解しましょう。
