【css】 positionの基礎知識・使い方（サンプルコード付き）

こんにちは！
「positionって何・・？」「要素の位置を思うように移動させたい・・!」「要素の位置を固定させたい・・!」

positionの基礎知識を理解し、思うように位置を変更・固定させたい。そのように考えている、初心者web制作者の方も多いのではないでしょうか？

要素の位置移動・固定はWEB制作で欠かせない概念になってきます。

今回は、初心者の方向けに、要素の位置移動プロパティ「 position」に詳しく解説していきます。

positionとは

positionとは、要素の位置配置を指定するプロパティの事です。
下記のような場面で使用されます。

●要素を左から右に100px移動。上から下に100px移動したい

●要素を重ねたい

●ヘッダーメニューをスクロールしても決まった位置にヘッダーを固定したい

位置を変えたい、重ねたい、固定したい、など位置指定できるプロパティ、それが「position」です。

positionの書き方

基本記述
セレクタ {
position: 値;
}

値（基準位置の指定）と　基準からどこの位置に指定するのかを指定していきます。

「基準を決める→基準からどこの位置に指定するかを決める」
といった流れになります。
詳しくみていきます。

位置を指定する「top」「bottom」「left」「right」

positionは、基準位置を固定し。
「top」「bottom」「left」「right」で位置を調整します。

プロパティ	内容
top	基準位置から下に動かす距離
bottom	基準位置から上にに動かす距離
left	基準位置から下に動かす距離
right	基準位置左に動かす距離

指定できる値

指定する値によって位置の指定方法にオプションをつけます。
指定できる値

値	内容
position:static;	初期値です。通常の位置に配置され、指定することはほとんどありません。
position:relative;	現在の位置を基準に相対的な位置を決めます。基準（現在地）から、「top」、「bottom」、「left」、「right」などで位置を調整する。
position:absolute;	親要素を基準に絶対的な位置を決めます。基準（親要素）から、「top」、「bottom」、「left」、「right」などで位置を調整する。
position:fixed;	画面のきまった位置に固定します。 absoluteと同じく親要素を基準とした位置に配置されますが、absoluteとの違いは、画面スクロールしても位置が固定されたままになります。

それぞれの値について詳しく見てみます。

static

staticはデフォルト値になります。

●staticの特徴
1.staticは初期値、記述しなければstaticになっている。
2.要素は通常の位置、上下左右中央に動かす事ができない。
3.top,leftなどを指定できない。
4.z-index（要素の重なりを指定できない。）

staticは初期値の為、基本的に指定される事はありません、知識として知っておくだけで問題ありません。

relative

relativeは要素が本来配置される位置が基準となります。

●relativeの特徴
1.top,leftなどの位置指定ができる。
2.z-indexの指定できる。
3.基準値は、もともと配置される場所。
4.absoluteの親、基準になれる。

relative使用例（top100 left100動かす）

実際に、position:relative;を指定し位置を動かします。

サンプルコード表示結果

HTMLサンプルコード

<div class="sample1"></div>

CSSサンプルコード

.sample1 {
   width: 200px;
   height: 100px;
   background-color: red;
   position: relative;
   top: 100px;
   left: 100px;
}

※解説
position:relative;を指定し基準を決める。
本来置かれる位置（薄い青色の四角形）を基準に、「top100」「left100」を指定し位置変更されています。

上記のように、relative;は本来配置される位置を基準に「top」「left」などを指定し位置を変更します。

absolute

absoluteは.relative（親要素）を基準に位置を決めます。

●absoluteの特徴
1.relative（親要素・基準）に対しabsolute（子要素）を指定。
2.absolute（子要素）にtop,leftで動かしたい位置を指定する。

使用例（親要素を基準に子要素位置指定）

サンプルコード表示結果

HTMLサンプルコード

<div class="sample1">親要素</div>
<div class="sample2">子要素</div>

CSSサンプルコード

.sample1 {
   width: 300px;
   height: 200px;
   background-color: blue;
   position: relative;
   color: #ffffff;
}
 .sample2 {
   width: 300px;
   height: 200px;
   background-color: red;
   position: absolute;
   top: 100px;
   left: 100px;
   color: #ffffff;
}

※解説
青四角形にrelativeを指定し親要素にする。
赤四角形にabsoluteを指定し子要素にする。
absolute「top100」「left100」の位置を指定する事で、親要素（青四角形）を基準に子要素（赤四角形）が位置移動する事ができています。

absoluteを実用的に便利に使える場面として「画像の上に文字を載せる」「ロゴを真ん中央寄せにする」などがあります。
サンプルコードで詳しく見ていきます。

画像の上に文字を載せる

サンプルコード表示結果

HTMLサンプルコード

 <div class="img">
      <p class="sample">
         空の写真です。
      </p>
</div>

CSSサンプルコード

.img {
	position:  relative;      
	width: 500px;
	height: 300px;
	background-image: url(https://cdn.pixabay.com/photo/2021/01/11/08/53/sky-5907605_960_720.jpg);
	background-size:  cover;
 }
 .sample {
	position:  absolute;
	top: 20px;
	left: 40px;                
	color:  #000000;                         
	font-size: 30px;  
 }

※解説
背景画像を指定し、背景画像にrelativeを指定し親要素にする。
p要素に文字を記載、p要素にabsoluteを指定子要素にする。
absolute「top20」「left40」の位置を指定する事で、親要素（背景画像）を基準に子要素（文字）が位置移動する事ができています。

ロゴを真ん中央寄せにする

サンプルコード表示結果

HTMLサンプルコード

<div class="img">
     <div class="sample">
       ロゴ
     </div>
</div>

CSSサンプルコード

.img {
   position:  relative;      
   width: 500px;
   height: 300px;
   background-image: url(https://cdn.pixabay.com/photo/2021/01/11/08/53/sky-5907605_960_720.jpg);
   background-size:  cover;
}
.sample {
   width: 100px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   color: #fff;
   background-color:  #000000;                         
   font-size: 30px;
   position:  absolute;
   top:  0;                  
   bottom:  0;               
   left:  0;                  
   right:  0;                 
   margin:  auto;            
}

※解説
背景画像を指定し、背景画像にrelativeを指定し親要素にする。
div要素にロゴを記載、absoluteを指定し子要素にする。
absolute　「top: 0;」「bottom: 0;」「left: 0;」「right: 0;」の位置指定に「margin: auto」を組み合わせる事で、ロゴを上下左右中央寄せにする事ができています。

fixed

fixedは画面の決まった位置に要素を固定する時に使います。

fixedの特徴
1.ブラウザ画面全体が基準。
2.スクロールしても同じ位置に固定されている。
3.top,leftなどの位置指定ができる。
4.z-indexの指定ができる。

使用例（ヘッダーを画面上に固定）

サンプルコード表示動画

HTMLサンプルコード

<div class="header-menu">ヘッダーメニュー</div>
 <p>テキストテキスト1</p>
 <p>テキストテキスト2</p>
 <p>テキストテキスト3</p>
 <p>テキストテキスト4</p>
 <p>テキストテキスト5</p>
 <p>テキストテキスト6</p>
 <p>テキストテキスト7</p>
 <p>テキストテキスト8</p>
 <p>テキストテキスト9</p>
 <p>テキストテキスト10</p>

CSSサンプルコード

.header-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px;
   line-height: 50px;
   background: orange;
   color:white;
}
p {
   margin-top: 50px;
   margin-bottom: 100px;
}

※解説
スクロールしても常にヘッダーメニューが、固定されて表示されています。
これがposition: fixed;です。

position: fixed;を指定し固定したい位置に、top,leftなどを指定し固定箇所を決めます。

まとめ

今回は、要素の位置移動プロパティ「 position」に詳しく解説してきました。

最後に、ポイントをまとめます。

●positionとは
要素の位置配置を指定するプロパティ。

●positionをよく使用する場面
要素の位置変更、文字を画像に重ねる、ヘッダーの固定。

●positionの基本記述
セレクタ {
position: 値;
}

●positionの位置指定は
「top」「bottom」「left」「right」を使用し位置調整する。

●positionで指定できる値
position:static;（初期値。通常の位置に配置され、指定する。）
position:relative;（現在の位置を基準に相対的な位置を決める。）
position:absolute;（親要素を基準に絶対的な位置を決める。）
position:fixed;（画面のきまった位置に固定。）

いかがだったでしょうか？
「position」はどこを基準としているのかがポイントになってきます。
初心者の方にとって、最初は少し複雑に感じてしまいますが、
「基準位置の確認→位置指定」と流れはシンプルです。

位置の移動・固定ができれば制作の幅も広がります、ぜひ本記事を参考にしてください。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。