【補足解説】position

CSS

positionについて

positionには4つの値があります。

static(スタティック)：初期値
relative(リラティブ)：現在の位置を基準に相対的な位置を決める
absolute(アブソリュート)：親要素を基準に絶対的な位置を決める
fixed(フィクスト)：画面の決まった位置に固定する

また、positionは基本的に「top」「bottom」「left」「right」というプロパティとセットで使用します。

positionで基準を決めて、「top」「bottom」「left」「right」で具体的な位置を数字で調整します。

例えば、基準の上から50pxとしたい場合は「.box { top: 50px; }」のように書きます。

relativeについて
absoluteについて
fixedについて

relativeについて

relativeは現在の位置を基準に相対的な位置を指定します。例として以下のようなコードを用意します。

.box1{
width: 200px;
height: 150px;
background: rgb(247, 162, 162);
color: #fff;
text-align: center;
line-height: 150px;
}
.box2{
width: 200px;
height: 150px;
background: rgb(250, 240, 106);
color: #fff;
text-align: center;
line-height: 150px;
}
.box3{
width: 200px;
height: 150px;
background: rgb(162, 202, 247);
color: #fff;
text-align: center;
line-height: 150px;
}

今回、縦にならんだ「box1」「box2」「box3」のうち、「box2」のCSSに下記のコードを追加します。

.box2{
width: 200px;
height: 150px;
background: rgb(250, 240, 106);
color: #fff;
text-align: center;
line-height: 150px;
/* 追加コード */
position: relative;
top: 150px;
left: 100px;
}

するとrelativeは現在の位置を基準として、基準の左上から動くので下記のように動きます。

本来の表示位置から「top:150px」(上から150px)「left:100px」(左から100px)動いています。

absoluteについて

absoluteは親要素を基準に絶対的な位置を指定します。

absoluteは、

親要素のpositionプロパティにstatic以外の値が指定されている場合、親要素が基準
上記以外はウィンドウを基準

となります。

今回は、②のウィンドウを基準としてみていきます。「box2」のCSSに以下のコードを追加します。

.box2{
width: 200px;
height: 150px;
background: rgb(250, 240, 106);
color: #fff;
text-align: center;
line-height: 150px;
/* 追加コード */
position: absolute;
top: 0px;
left: 0px;
}

試しに「top」「left」の値を「0」にしてみます。

すると右のように親要素左上にぴったりくっついています。

これはtopとleftの値を指定した場合、左上が基準となるからです。

逆に「bottom」「right」の値を0にすると親要素の右下が基準となります。

左上を基準として「top:150px」「left:100px」とすると以下のようになります。

absoluteは絶対的な位置指定です。

そのため他の要素があっても、表示位置は変わらず重なって表示されます。

今回はウィンドウを基準としましたが、absoluteを使って位置調整するときは親要素にrelateive、またはfixedを指定し、基準とする場所を親要素に設定するようにしましょう。

fixedについて

fixedは画面の決まった位置に固定させたいときに使用します。

例えば、スクロールしても位置が変わらないメニューバーを表示したいときなどによく使われるものになります。

例えば以下のようなコードを実行するとスクロールしても位置が変わらないことがわかります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>position</title>
<style>
.fixed {
position: fixed;
padding: 15px;
top: 0;
left: 0;
margin: 0;
width: 100%;
background: pink;
color: #000;
}
</style>
</head>
<body>
サンプルサンプルサンプル1
サンプルサンプルサンプル2
サンプルサンプルサンプル3
サンプルサンプルサンプル4
サンプルサンプルサンプル5
サンプルサンプルサンプル6
サンプルサンプルサンプル7
サンプルサンプルサンプル8
サンプルサンプルサンプル9
サンプルサンプルサンプル10
サンプルサンプルサンプル11
サンプルサンプルサンプル12
サンプルサンプルサンプル13
サンプルサンプルサンプル14
サンプルサンプルサンプル15
サンプルサンプルサンプル16
サンプルサンプルサンプル17
サンプルサンプルサンプル18
サンプルサンプルサンプル19
サンプルサンプルサンプル20
固定されたP要素
</body>
</html>

最初は混乱するかもしれませんが、ぜひ覚えておきましょう。