positionプロパティを正しく理解しよう｜デザイン再現の落とし穴と使い分け

デザインの再現性でよく悩むのがこの部分です。

「Figmaのデザイン通りにコーディングしたいのに、どうしてもうまくいかない…」
「見た目を合わせようとすると、position: absolute が増えてしまう…」

これは決して悪いことではありません。
むしろ「デザインを忠実に再現したい」という気持ちはとても大切です。
しかし、positionを多用しすぎると後々レイアウトが崩壊するという落とし穴があります。

この記事では、position プロパティの基本と使いどころ、そして「どうすれば“崩れないコーディング”になるのか」を具体的に解説します。

positionプロパティとは？

position はCSSの中でも特に配置をコントロールするためのプロパティです。
デザイン通りに見せたいときには欠かせない存在ですが、実はHTMLの構造理解とセットで使わないと危険なプロパティでもあります。

値は主に以下の5種類です。

position: static（デフォルト）

HTMLの要素は、特に指定をしない限り position: static; で配置されています。
つまり、HTMLで書かれた順番どおりに上から下へ、左から右へ並びます。下記は標準仕様です。

div {
  position: static;
}

いわゆる「文書の流れ（normal flow）」に沿った自然な配置です。
この仕組みを前提にしているのが、flex や grid です。
つまり、現代のレイアウトでは、positionを使わずに整える方が推奨されるのです。

position: relative（相対配置）

relativeは「もとの位置を基準に少しだけ動かす」指定です。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

ポイントは、見た目だけ動くけれど、元のスペースは残るということ。
空間的には動かず、「浮いて見える」イメージです。

よく使われる場面は「absolute要素の基準を作る」ときです。
親要素に position: relative; を指定しておくと、その中の子要素を position: absolute; で配置しやすくなります。

position: absolute（絶対配置）

absoluteは「親要素を基準に、指定した位置に固定」する方法です。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

このように、親要素にrelativeがついていないと基準を見失う点に注意。
親がposition: static;のままだと、body全体が基準になります。

absoluteはバッジ・アイコン・装飾・背景的なオブジェクトに向いています。
ただし、レイアウト全体をabsoluteで組むのは非推奨。ブラウザ幅が変わると、ズレや重なりが発生します。

レスポンシブ対応の際は、絶対単位のpxより相対単位の%を使うのが一般的です。

position: fixed（画面固定）

position: fixed; は、画面（ビューポート）を基準に配置します。
スクロールしても動かないため、上へ戻るボタンや固定ヘッダーに便利です。

#pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width:100%;
}

画面の右下にずっと表示される、あの「▲」ボタンが典型的な例です。
ただし、スマホ表示では被ってしまうこともあるため、メディアクエリで非表示にするなどの工夫が必要です。

また、position　プロパティはwidth指定がなくなるので、あらためて指定を行う必要があります。

position: sticky（スクロール連動）

stickyは、「特定位置までスクロールすると固定される」動きを作れます。

header {
  position: sticky;
  top: 0;
}

サイトのグローバルナビや見出しをピタッと止めるときに使います。
近年のUIではこのstickyがよく使われており、JavaScriptを使わずに簡単な固定ヘッダーを実現できます。

なぜabsoluteに頼りすぎると危険なのか？

実作業では、デザインを忠実に再現しようとするあまり、position: absolute; を多用するケースが非常に多いです。

「この文字、ちょっと右上だから top:30px; left:80px; にしよう」
「画像も重ねたいから absolute で z-index:2 で…」

これを繰り返すと、一見きれいに見えますが、画面サイズを変えた瞬間に全ての位置がずれてしまいます。

absoluteは「親要素のサイズが変わらない前提」で動くため、レスポンシブデザインや動的なコンテンツ（CMS）との相性が最悪です。

よくある誤用と正しい書き方

デザインとコーディングの「考え方のズレ」を減らす

多くのデザイナーが、“デザインの見た目を再現する”ことに集中しすぎて、HTMLの構造を軽視してしまう傾向があります。
しかし、Webサイトは静止画ではなく「情報を構造的に伝える」媒体です。

デザインを再現するときは、以下の視点を意識してみてください。

• その要素はどういうグループに属しているか？
• どの要素が基準になっているか？
• 固定値ではなく、親要素に合わせて動く配置にできないか？

これを意識するだけで、コードが整理され、後の修正もスムーズになります。

現場でも重視される「構造現場でも重視される「構造的レイアウト」

実務でも、「見た目をabsoluteで合わせる」コーダーより、「構造とデザインを両立させる」コーダーが圧倒的に評価されます。

たとえば、Webデザインカンプ通りにpx単位で合わせるのではなく、余白・比率・テキスト位置を柔軟に対応できる構成を考えられる人。それがプロのコーディング思考です。

positionはレイアウトの最終手段

• position は便利だが、使いどころを誤ると崩壊する
• relative は基準づくり、absolute は装飾、fixed／sticky はUI向け
• レイアウトは flex／grid で構築するのが基本
• デザインは「固定値」ではなく「関係性」で再現する

デザインとコーディングの「ちょうどいいバランス」を見つけられるようになると、現場でも強く信頼される存在になれます。