CSSで位置を調整・固定するpositionの指定方法 byウェブカツ

CSSでの位置指定は、webサイト作りの基本中の基本。
見栄えを良くするために、要素の位置を自由に決めたい場面は多い。

だが、HTML/CSSを学習し始めた方には分かりにくい部分でもある。

そこで今回は、<span class="keiko_yellow"><strong>CSSで要素の位置を調整するときに使うpositionプロパティ</strong></span>について解説する。

<h2>positionとは</h2>
positionとは、<strong>要素の位置を決めるためのプロパティ</strong>のこと。

HTMLのブロック要素は基本的に縦並びで、floatやflexboxなどを使う事で横並びにする事ができる。
大まかなレイアウトはこれで対応できるが、細かく要素の位置を指定したいときにはpositionを利用する。

<h2>CSSで位置を指定する書き方</h2>
<h3>positionの書き方</h3>
positionプロパティはこう書く。

<pre class="lang:css decode:true ">要素 {
position: 値;
}</pre>
&nbsp;

値の部分には<strong>「static」「relative」「absolute」「fixed」</strong>のどれかが入る。この値によって「どの様にして位置を決めるのか」を指定することができる。


<ul>
 	<li><strong>static</strong>: positionの初期値。位置を決める方法を指定ない。</li>
 	<li><strong>relative</strong>: 今の位置を基準として、相対的な位置を決める。</li>
 	<li><strong>absolute</strong>: static以外のpositionが指定された親要素の位置を基準として、絶対的な位置を決める。</li>
 	<li><strong>fixed</strong>: ブラウザウィンドウを基準として、絶対的な位置を決める。画面をスクロールしてもその場所に固定されたまま。</li>
</ul>

<h3>位置を調整するtop・bottom・left・rightの使い方</h3>
positionの値で指定した位置の決め方に従い、実際にどれだけ動かすのかを決めるのが 「top」「bottom」「left」「right」。

<ul>
 	<li><strong>top</strong>: 指定した位置の「上」からどれだけ動かすかを決める</li>
 	<li><strong>bottom</strong>: 指定した位置の「下」からどれだけ動かすかを決める</li>
 	<li><strong>left</strong>: 指定した位置の「左」からどれだけ動かすかを決める</li>
 	<li><strong>right</strong>: 指定した位置の「右」からどれだけ動かすかを決める</li>
</ul>

実際に指定するときは、positionと組み合わせて<span class="keiko_yellow"><strong>「top, bottomのどちらか」</strong></span>と<span class="keiko_yellow"><strong>「left, rightのどちらか」</strong></span>を指定する。

例えば、「sample」というクラスの要素を今の位置を基準として上から10px, 左から20pxのところに要素を移動する場合は、以下の様にCSSを記述。

#### CSS
<pre class="lang:css decode:true">.sample {
position: relative; /* 今の位置を基準 */
top: 10px; /* 上から10px */
left: 20px; /* 左から20px */
}</pre>
&nbsp;

この値は<strong>position: staticの時には指定することができない</strong>ので注意。

<h2>positionの値と位置指定の方法</h2>

ここからはもう少し詳しく、positionの値によって要素がどう動くのかを説明する。

<h3>position:static - CSSで何も記載しないときの初期値</h3>

staticはpositionの初期値。CSSで何もしていないときはこの値になっている。

例えば、縦横が300pxの赤い要素と、縦横が100pxの黒い要素（今回はdiv）をstaticを使って配置してみよう。

#### HTML
<pre>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;link rel="stylesheet" href="style.css" /&gt;
&lt;title&gt;sample&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="red"&gt;&lt;/div&gt;
&lt;div class="black"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
&nbsp;

#### CSS
<pre class="lang:css decode:true">.red {
width: 300px;
height: 300px;
background: #d7263d;
position: static; /* staticを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
}</pre>
&nbsp;

#### 結果

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/static.png"><img src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/static.png" alt="" width="800" height="500" /></a>

この様に、縦にすき間無く並んだ状態になる。

<strong>staticは、位置や重なり（z-index）を指定しても反映されない。</strong>
例えば黒の要素を右へ10px動かそうと

<pre class="lang:css decode:true ">.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
left: 10px; /* 左から10px移動する */
}</pre>


と書いても移動しないので、要素を移動させたい場合は、<strong>relativeやabsoluteにする</strong>。
<h3>position:relative - 相対的に位置を移動させたい時に利用</h3>
relativeは、<span class="keiko_yellow"><strong>今の位置を基準として、相対的な位置を決める</strong></span>ときに使う。
<br>
まずはrelativeを指定してみよう。
(HTMLはstaticと同じなので省略)
<br>
#### CSS
<pre class="lang:css decode:true ">.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
}</pre>
&nbsp;

#### 結果

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/static.png"><img class="alignnone size-full wp-image-3839" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/static.png" alt="" width="800" height="500" /></a>

見た目はstaticと変わらない。
では、ここから黒い要素を<strong>「上から10px」「左から20px」</strong>動かしてみよう。

#### CSS
<pre class="lang:css decode:true ">.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
top: 10px; /* 上から10px移動 */
left: 20px; /* 左から20px移動 */
}</pre>
&nbsp;

#### 結果
<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/relative.png"><img  src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/relative.png" alt="" width="800" height="500" /></a>

赤い要素にピッタリくっついて並んでいた黒い要素が、本来の表示位置から移動したのが分かるだろうか。

この様に、position:relativeはstaticと比較して

<ul>
 	<li><strong>top・bottom・left・rightを指定しなければstaticと同じ見た目になる</strong></li>
 	<li>top・bottom・left・rightを指定すると、位置を調整できる</li>
</ul>

という違いがあることを覚えておこう。

<h3>position:absolute - 親要素を基準として絶対的な位置を調整</h3>
position:absoluteは、親要素の位置を基準として絶対的な位置を決める事ができる。


まずは幅400px、高さ300pxのグレーの親要素の中に、1辺が150pxの赤い箱と1辺が100pxの黒い箱の要素を入れよう。

#### HTML
<div>
<div>
<pre class="lang:xhtml decode:true ">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;link rel="stylesheet"href="style.css" /&gt;
&lt;title&gt;sample&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="parent"&gt;
&lt;div class="red"&gt;&lt;/div&gt;
&lt;div class="black"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
&nbsp;

</div>
<div></div>
</div>
#### CSS
<pre class="lang:css decode:true ">.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
}</pre>
&nbsp;

#### 結果
<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/absolute01.png"><img  src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/absolute01.png" alt="" width="800" height="500" /></a>

postionを何も指定しないと、グレーの要素の中に、赤い要素と黒い要素が縦に並ぶ形になる。

では、黒い要素の位置をabsoluteにし、左上を基準とするためにtopとleftを0にしよう。
absoluteは「親の要素がstatic以外の時に、親要素を基準とする」ので、親要素であるparentにrelativeを付ける。

#### CSS
<pre class="lang:css decode:true ">.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
position: relative; /* 親要素にrelativeを指定 */
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
top: 0; /* 上を基準 */
left: 0; /* 左を基準 */
}</pre>
&nbsp;

#### 結果
<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/absolute02.png"><img src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/absolute02.png" alt="" width="800" height="500" /></a>

黒い要素の左上が、グレーの要素の左上と重なるように移動した。
今回はtopとleftを指定したため、基準が「親要素の左上」になっているが、例えば親要素の左下を基準としたい場合はこのように書く。

#### CSS
<pre class="lang:css decode:true ">.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
bottom: 0; /* 下を基準 */
left: 0; /* 左を基準 */
}</pre>
&nbsp;


<span class="orange"><strong><span class="big">結果</span></strong></span>

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/absolute03.png"><img class="alignnone size-full wp-image-3844" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/absolute03.png" alt="" width="800" height="500" /></a>

この様にabsoluteは他の要素は無視して、親要素を基準とした絶対的な位置を指定することができる。

<h3>position:fixed - 位置を固定</h3>

position:fixedは、<strong>画面を基準とした位置に要素が固定される</strong>。
例えばスクロールしても位置が変わらないヘッダーや、縦に長いページでよく見かける「上に戻る」ボタンなどで利用されている。

指定方法はabsoluteと同じだが、基準が親要素では無くブラウザウィンドウである事に注意。

<h2>positionを使った位置調整を練習しよう</h2>

CSSで思い通りに位置を動かせるようになるためには、実際にコードを書いてみるのが一番である。

ウェブカツでは、HTML/CSSの基礎を練習できる鬼練を無料で公開しているので、チャレンジしてみよう。
https://webukatu.com/wordpress/blog/1833


###かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/