06｜positionの4つの値をマスターして自由の高い配置を可能にしよう

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

本講座の流れ

まずは以下の動画をチェックして概要を把握
positionの4つの値の特徴と使い分けをマスター
positionを使った課題にチャレンジ

positionは要素の配置をコントロールするプロパティ

web兄さん

記事を読み進める前に、動画でpositionとは何かをざっくりと理解しましょう👍

オフセット（座標）の概念

positionの解説をするにあたり、オフセットという用語が出てきますが、これは要素が配置されている座標（位置）のことを指します。

この座標の情報は今までは出てきませんでしたが、要素に横幅や高さといった情報が与えられているように、座標の情報も自動で付与されています。

この座標を操作するのがpositionプロパティというわけです。

relative｜自身の位置を基準に配置

値	読み	基準	用途
relative	レラティブ	自身のオフセット	規定の位置からズラしたい場合

position: relavtiveは自身の要素のオフセットを基準に配置を変更します。

この例では、imgの位置を基準として、変更しています。

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

<div>
  <h1>見出し</h1>
  <img src="photo.jpg">
  <p>テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル</p>
</div>

img{
  position: relative; /* 自身のオフセットが基準 */
  top: -30px;         /* 上端を0として-20pxの位置へ */
  right: 20px;        /* 右端を0として20pxの位置へ */
}

要素が配置された上下左右の0を基準として動かす

positionでは基準とした要素の上下左右の0の位置をもとに配置を決定させます。

そして指定する値には正の数（+の値）と負の数（-の値）を指定することができます。

例では単位をpxとしていますが、当然%やemといった相対値も使うことができます。

top（要素の上端を0として+値なら下にズレ、-値なら上にズレる）
right（要素の右端を0として+値なら左にズレ、-値なら右にズレる）
bottom（要素の下端を0として+値なら上にズレ、-値なら下にズレる）
left（要素の左端を0として+値なら右にズレ、-値なら左にズレる）

web兄さん

ここまでがpositionの超基本です！ここから少し複雑になってきます。

要素の重なりや余白については後述します

例では画像が他の要素にかぶっていたり、もともと画像があった箇所に隙間（余白）ができていますが、それらは後で解説するのでご安心ください。

positionは特定の要素のオフセットを基準に配置を指定する

ここで改めておさらいですが、positionは指定する時に必ず基準となるオフセットが必要です。

先ほどのposition: relartiveの例では、配置を変更したい要素自身のオフセットを基準に位置を調整しましたよね。

これから紹介する、position: absolute、position:fixed、position: stickyもそれぞれ何かしらの要素のオフセットを基準として配置を変更します。

web兄さん

自分が「何の要素のオフセットを基準として配置を決めているか」を意識することでpositionを素早くマスターすることができます！

absolute｜親要素の位置を基準に配置

値	読み	基準	用途
absolute	アブソリュート	親要素のオフセット	親要素内で任意の位置に固定したい場合

position: absoluteはpositionを使う上で最も使用頻度の高い値かもしれません。

relativeは自分のオフセットを基準にしましたが、absoluteは親要素のオフセットを基準にします。例を見てみましょう。

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

<div>
  <h1>見出し</h1>
  <img class="one" src="photo01.jpg">
  <img class="two" src="photo02.jpg">
  <p>テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル</p>
</div>

div{
  position: relative; /* 基準としたい親に[必須]で指定 */
}

img{
  position: absolute; /* positionの指定がある親要素が基準 */
}

img.one{
  top: 20px;          /* div（親）の上端を0として20pxの位置へ */
  right: 20px;        /* div（親）の右端を0として20pxの位置へ */
}

img.two{
  bottom: 20px;       /* div（親）の下端を0として20pxの位置へ */
  left: 20px;         /* div（親）の左端を0として20pxの位置へ */
}

absoluteは要素が浮いている状態がイメージとして近いでしょう。

浮いたimgが元々配置されていた箇所は別の要素で詰められ隙間がなくなります。

そして、先ほどは自身のオフセットを基準としていましたが、親要素であるdivのオフセットを基準にそれぞれのimgが配置されていますよね。これが大きなポイントです。

positionが指定されている親要素の中で最も近い親を基準とする

absoluteを指定するときは必ず親要素にpositionの指定が必要ですが、必ずしも直近の親要素である必要はありません。

例えば以下の例では.naka（一つ目の親）を基準にしているので、内側の赤のボックスを基準に配置されます。

<div class="soto">
  <div class="naka">
    <img class="one" src="photo.jpg">
  </div>
</div>

.naka{
  position: relative;
}

続いて、.nakaは指定なし、.sotoに対してposition: relativeをつけてみます。

すると外側の緑色のボックスを基準として配置されました。

<div class="soto">
  <div class="naka">
    <img class="one" src="photo.jpg">
  </div>
</div>

.soto{
  position: relative;
}

web兄さん

つまり、relativeが自身を基準とする絶対配置なのに対して、absoluteは特定の親要素を基準とする相対配置ということです！

fixed｜画面を基準に固定配置

値	読み	基準	用途
fixed	フィクスト	画面	画面の中で常に同じ場所に固定鉢したい時

画面の特定の箇所に固定したいときにposition: fixedを使用します。スクロールしても画面の右下に「ページ上部へ戻る」のボタンが固定されていますよね。

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

ページ上部へ戻る

<div>
  <h1>見出し</h1>
  <img class="one" src="photo.jpg">
  <p>テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル</p>
  <a href="#body-top">ページ上部へ戻る</a>
</div>

a{
  position: fixed;   /* 画面を基準にする */
  right: 0;          /* 画面の下に固定 */
  bottom: 0;         /* 画面の下に固定 */

　background: #333;
  color : #fff;
  padding: 10px;
  width: 160px;
  display: block;
  text-align: center;
}

sticky｜親要素を基準に固定配置

値	読み	基準	用途
sticky	スティッキー	親要素	特定の親要素の中でだけ固定配置したい時

positin: stickyはfixedとabsoluteの組み合わせ技です。

fixedが画面を基準としていたのに対して、absoluteのように親を基準とし、その中だけで固定することができます。

以下の例ではサイドバーが画面上に見えている間は上部に画像が固定されています。

基準となるサイドバー（.content__side）にposition: relativeを指定し、固定させたいimgにposition: stickyを指定しています。

<div class="content">
  <div class="content__main">
    <p>テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル</p>
  </div>
  <div class="content__side"> <!-- 👈この親要素を基準に固定 -->
    <img src="photo.jpg">     <!-- 👈.content__sideの中で固定 -->
  </div>
</div>

.content{
  display: flex;
}

.content__main{
  flex-grow: 1;
}

.content__side{
  position: relative; /* 基準となる親 */
  flex-basis: 30%;
  flex-shrink: 0;
}

.content__side img{
  position: sticky;
  top: 10px; /* .content__sideの領域の中で上から10pxの位置に固定 */
}

web兄さん

理解が難しかった方は以下の動画を見てください！

position: stickyの解説

positin: stickyが効かない時は？

positionの中でもstickyは特に「うまくいかない」という質問が多い値です。思い通りにいかない場合は以下を確認してみてください。

基準となる親要素にpositionプロパティが指定されていない
基準となる親要素の高さが足りない 👈一番多い理由
基準となる親要素にoverflow: hiddenが設定されている
固定したい子要素にtopの指定がない

static｜初期値

実は、positionには初期値が存在しています。

HTMLは、通常上から書いたコードがそのまま上から下に向かって並んでいきますよね。

この自然に配置された要素の状態がposition: staticです。

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

div{
  /* 初期値のstaticの状態では効かない */
  top: -30px;
  right: 20px;
}

上記の例では、topやrightを指定していますが、画像の配置は変わっていませんよね。

実は、staticの状態ではtopやrightの位置の指定をしても適用されません。

web兄さん

位置の指定をするにはrelative、absolute、fixed、stickyのいずれかが指定されている必要があることを覚えておきましょう。

positionで要素を動かした時の他の要素の動き

今まで説明を避けてきましたが、positionで要素を動かした時、他の要素の配置はどのように動いていくのでしょうか？

値によって他の要素のオフセット（位置）にどういう影響が出るかが決まっています。

値	他の要素のオフセットへの影響
`relative` `sticky`	他の要素のオフセットに影響が出ない（要素分の余白が残る）
`absolute` `fixed`	他の要素のオフセットに影響が出る（要素の余白が詰まる）

実際の例で確認してみましょう。

以下の例ではposition: relativeで画像の位置を移動させていますが、画像が移動しても他の要素は動かず、元々画像が配置されていた場所に空間ができていますよね。

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

続いてposition: absoluteです。画像を移動させたことにより、pは元々画像が配置されていた箇所に移動（詰まる）しました。

加えて、親要素のdiv高さも縮んでいます。

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

見出し

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

実際に図で表すと次のようなイメージになります。

absoluteやfixedを使用することで、通常の要素が配置される階層から外れます。

そのため、他の要素のオフセットに影響がでるというわけですね。

z-index｜要素の重ね順を指定する

z-indexプロパティを使用することで要素の重ね順（z軸）をコントロールすることができます。

（横と縦の動きをx軸とy軸とするなら、奥行きはz軸）

デフォルト（postion: static）の状態ではhtmlの記述順に重ね順が決定され、後に書いたコードの要素が上にきます。

<div>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

.a{
  position: relative;
  top: 20px;
}

.c{
  position: relative;
  bottom: 20px;
}

web兄さん

a → b → cの順番で記述しているので、重ね順もBはAより前面に重なり、CはBより前面に重なっています！

それではz-indexを使って「A」> 「B」> 「C」の重ね順に変更させてみます。

.a{
  position: relative;
  z-index: 2;
}

.b{
  position: relative;
  z-index: 1;
}

z-indexには数字を指定し、数字が大きいほど前面へ移動します。（同じ数字の場合は書き順）

z-indexの指定がない場合は、z-index: 0と同じであるため.cは「0」となります。

z-indexはpositionプロパティの指定が必須

x軸やy軸を操作するtopやleftがposition: staticの場合効かないように、z軸を操作するz-indexもposition: static以外でなければ適用されません。

z-indexが効かない場合

数字の大きさは合っているのに要素が前面に出てこないことがあります。以下の例を見てみてください。

.aはz-index: 2で.bはz-index: 1であるのに関わらず、.bの方が前面にきています。

<div>

  <div class="a">A</div>

  <div class="b-parent">
    <div class="b">B</div>
  </div>

  <div class="c">C</div>

</div>

.a{
  position: relative;
  z-index: 2; /* Bより上にくるはず */
}

.b-parent{
  position: relative;
  z-index: 3;
}

.b{
  position: relative;
  z-index: 1; /* Aより下にくるはず */
}

これは.b親要素である.b-parentにz-index: 3（.aより大きな数）が指定されているからです。

z-indexは同じ階層で指定されているz-indexの数字と比較して重ね順を決定します。わかりやすくするためにもう一つ例を出します。

先ほどのコードに加えて、Aにも親を付け足してみました。

そして、.a-parentとはz-indexを「2」、.b-parentのz-indexを「3」にした上で（aより大きく）.aはz-index: 9999としてみます。

<div>

  <div class="a-parent">
    <div class="a">A</div>
  </div>

  <div class="b-parent">
    <div class="b">B</div>
  </div>

  <div class="c">C</div>

</div>

.a-parent{
  position: relative;
  z-index: 2;
}

.a{
  position: relative;
  z-index: 9999;
}

.b-parent{
  position: relative;
  z-index: 3;
}

.b{
  position: relative;
  z-index: 1;
}

すると、「9999」の.aは.bよりも下になっています。

これは同じ階層の親要素同士のz-indexですでに.bよりも下の階層になってしまっているからです。

web兄さん

最初は上記のポイントに注意した上で、デベロッパーツールで確認しながら重ね順の変化を見て調整すれば良いと思います👍

positionに関するQ&A

基準となる要素にmarginやpaddingがあった場合の基準は？

relativeの場合は自身を基準としますが、marginやpaddingが適用された上で余白を含めて要素の端が基準となります。

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

img{
  position: relative;
  left: 20px;
  margin-left: 20px;
  padding-left: 20px;  
}

デベロッパーツールで見ても、このようにmargin-leftとpadding-leftが適用された状態に加えてleftで配置がズレていますよね。

absoluteの場合はどうでしょうか？

基準となる親要素にmarginとpaddingがあった場合、marginは無視されます。

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

div{
  position: relative;
  margin: 20px;
  padding: 20px;  

}

img{
  position: absolute;
  top: 0px;
  left: 0px;
}

デベロッパーツールで見ても、marginは基準から外れ、padding領域の左上を基準に、left: 0とtop: 0になっていますね。

はみ出た要素はどう処理する？

positionで動かした要素が親要素からはみ出てしまう場合はoverflow: hiddenを親要素に指定することではみ出た子要素を隠すことができます。

例えば以下の場合、親要素を画像が飛び越えてしまっていますよね。

div{
  position: relative;
}

img{
  position: absolute;
  top: -20px;
  left: -20px;
}

overflow: hiddenを適用するだけではみ出た部分を隠すことができます。

div{
  position: relative;
  overflow: hidden;
}

img{
  position: absolute;
  top: -20px;
  left: -20px;
}

【課題】positionの4つの値を実際のデザインでマスター

デザインデータとFigmaのファイル（.fig）をダウンロードして動画を確認してください。

デザインデータ（06_position.fig）

課題用ファイル（06_position.zip）

.figファイルのインポート方法はこちらを参考にしてください。

正解の解説

06_position > A > style.cssと一緒に以下の解説動画を確認ください。

Category

Pickup

Contact

06｜positionの4つの値をマスターして自由の高い配置を可能にしよう

本講座の流れ

positionは要素の配置をコントロールするプロパティ

オフセット（座標）の概念

relative｜自身の位置を基準に配置

要素が配置された上下左右の0を基準として動かす

要素の重なりや余白については後述します

positionは特定の要素のオフセットを基準に配置を指定する

absolute｜親要素の位置を基準に配置

positionが指定されている親要素の中で最も近い親を基準とする

fixed｜画面を基準に固定配置

sticky｜親要素を基準に固定配置

positin: stickyが効かない時は？

static｜初期値

positionで要素を動かした時の他の要素の動き

z-index｜要素の重ね順を指定する

z-indexはpositionプロパティの指定が必須

z-indexが効かない場合

positionに関するQ&A

基準となる要素にmarginやpaddingがあった場合の基準は？

はみ出た要素はどう処理する？

【課題】positionの4つの値を実際のデザインでマスター

正解の解説