CSSのpositionプロパティで要素を配置する方法を解説

公開：2024年9月10日更新：2025年11月11日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

CSSのpositionプロパティは、HTML要素の配置方法を制御する基本的なプロパティです。しかし、static・relative・absolute・fixed・stickyという5つの値があり、動作の違いや使い分けが分からず、思い通りのレイアウトが実現できないという悩みを抱えている方も多いでしょう。

特に「relativeとabsoluteの関係性」や「fixedとstickyの違い」など、実務で頻繁に使う組み合わせを正しく理解していないと、要素が意図しない位置に配置されてしまいます。positionプロパティの各値の特徴を理解し、top・bottom・left・rightと組み合わせて使うことによって、ヘッダー固定やモーダル表示など様々なレイアウトを実現できます。

この記事では、CSSのpositionプロパティの各値の使い方、配置テクニックなどについて、サンプルコード付きで詳しく解説していきます。

CSSのpositionプロパティで要素の位置を指定する方法
staticで通常配置する
relativeで相対配置する
absoluteで絶対配置する
fixedで固定配置する
stickyで粘着配置する
CSSのtop・bottom・left・rightで配置位置を調整する方法
top・bottomで縦位置を指定する
left・rightで横位置を指定する
4つを組み合わせて配置する
CSSのrelativeとabsoluteを組み合わせて要素を配置する方法
親要素にrelativeを指定する
子要素にabsoluteを指定する
画像の上に要素を重ねる

CSSのpositionプロパティで要素の位置を指定する方法

CSSのpositionプロパティを使用することによって、HTML要素の配置方法を制御できます。positionプロパティには5つの値があり、それぞれ異なる配置ルールを持っているため、目的に応じて使い分けることが重要です。

要素の位置を指定する方法として、以下の5つがあります。

staticで通常配置する
relativeで相対配置する
absoluteで絶対配置する
fixedで固定配置する
stickyで粘着配置する

それぞれの値は配置の基準点が異なり、top・bottom・left・rightプロパティとの組み合わせで細かな位置調整が可能です。staticは初期値で位置指定ができず、relative以降の値では明示的な位置指定ができるようになります。

それでは各項目について、詳しく解説していきます。

staticで通常配置する

staticはpositionプロパティのデフォルト値で、HTML要素を通常のドキュメントフローに従って配置します。デフォルト値とは、CSSで明示的に指定しなかった場合、自動的に適用される初期設定のことです。staticを指定した要素は、HTMLの記述順に上から下、左から右へと配置されます。

基本的な書き方は、以下の通りです。

セレクタ {
  position: static;
}

staticの最大の特徴は、「top・bottom・left・rightプロパティ」や「z-indexプロパティが効かない」点です。これらのプロパティを使って位置を調整したい場合は、後述するrelative以降の値を使用する必要があります。実務では、positionプロパティをリセットする目的で、明示的にstaticを指定することがあります。

relativeで相対配置する

relativeは、要素を本来の位置を基準として、相対的に配置する値です。本来の位置とは、positionプロパティを指定しなかった場合にその要素が配置される位置のことで、この基準点からtop・bottom・left・rightで指定した分だけ移動します。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      margin: 10px;
    }
    .relative {
      position: relative;
      top: 20px;
      left: 30px;
      background-color: #e74c3c;
    }
  </style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box relative">Box 2 (relative)</div>
  <div class="box">Box 3</div>
</body>
</html>

上記のコードでは、2番目のボックスにposition: relativeを指定し、top: 20pxとleft: 30pxで位置を調整しています。この要素は本来の位置から上方向に20px、左方向に30px移動しますが、他の要素のレイアウトには影響を与えません。relativeを指定した要素は、元々占有していたスペースを保持したまま移動するため、3番目のボックスは2番目のボックスの本来の位置の下に配置されます。

absoluteで絶対配置する

absoluteはpositionプロパティに、static以外の値が指定された最も近い祖先要素を基準として、絶対的な位置に要素を配置する値です。祖先要素とは、親要素・親の親要素など、HTML構造で上位にあたる全ての要素のことを指します。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #ecf0f1;
      margin: 20px;
    }
    .absolute {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 100px;
      height: 100px;
      background-color: #2ecc71;
    }
  </style>
</head>
<body>
  <div class="container">
    <p>Container with relative</p>
    <div class="absolute">Absolute</div>
  </div>
</body>
</html>

上記のコードでは、親要素のcontainerにposition: relativeを指定し、子要素にposition: absoluteを指定しています。absolute要素は、親要素の右上から20pxの位置に配置され、通常のドキュメントフローから外れるため、他の要素に影響を与えません。もし親要素にpositionプロパティが指定されていない場合は、ブラウザのウィンドウ全体が基準となります。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

fixedで固定配置する

fixedはブラウザのビューポートを基準として、要素を固定配置する値です。ビューポートとは、ブラウザでWebページが表示される領域のことで、ページをスクロールしてもfixedを指定した要素は、常に同じ位置に表示され続けます。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 2000px;
    }
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #34495e;
      color: white
      display: flex;
      align-items: center;
      padding: 0 20px;
      z-index: 100;
    }
    .content {
      margin-top: 80px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <header class="header">
    <h1>Fixed Header</h1>
  </header>
  <div class="content">
    <p>ページをスクロールしても、ヘッダーは常に表示されます。</p>
  </div>
</body>
</html>

上記のコードでは、ヘッダー要素にposition: fixedを指定し、画面上部に固定しています。fixedを指定した要素も通常のドキュメントフローから外れるため、コンテンツ部分にはmargin-topで余白を設定し、ヘッダーとコンテンツが重ならないように調整しています。固定ヘッダーやページトップに戻るボタンなど、常に表示したい要素に使用されます。

stickyで粘着配置する

stickyはrelativeと同じように動作し、スクロールによって指定した位置に達すると、fixedのように固定される値です。この動作は、「セクション見出しを固定表示したい場合」や「スクロールに追従するナビゲーション」などで使用されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .section {
      height: 500px;
      padding: 20px;
      border-bottom: 1px solid #ddd;
    }
    .sticky-header {
      position: sticky;
      top: 0;
      background-color: #f39c12;
      padding: 10px;
      margin-bottom: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="section">
    <h2 class="sticky-header">Section 1</h2>
    <p>このセクションをスクロールすると、見出しが上部に固定されます。</p>
  </div>
  <div class="section">
    <h2 class="sticky-header">Section 2</h2>
    <p>次のセクションに入ると、前のセクションの見出しは隠れます。</p>
  </div>
</body>
</html>

上記のコードでは、各セクションの見出しにposition: stickyとtop: 0を指定しています。ページをスクロールすると、見出しが画面上部に到達した時点で固定され、次のセクションに入るまでその位置を維持します。stickyは親要素の範囲内でのみ機能するため、親要素をスクロールして抜けると固定が解除される点に注意が必要です。

CSSのtop・bottom・left・rightで配置位置を調整する方法

positionプロパティにstatic以外の値を指定した場合、top・bottom・left・rightプロパティを使用することによって、要素の配置位置を細かく調整できます。これらのプロパティは、position値によって基準点が変わるため、組み合わせ方を理解することが重要です。

配置位置を調整する方法として、以下の3つがあります。

top・bottomで縦位置を指定する
left・rightで横位置を指定する
4つを組み合わせて配置する

それぞれのプロパティは、px・%・emなどの単位で数値を指定でき、負の値を使用することも可能です。top・bottomは同時に指定すると要素の高さに影響し、left・rightは同時に指定すると要素の幅に影響します。

それでは各項目について、詳しく解説していきます。

top・bottomで縦位置を指定する

topプロパティは要素の上端の位置を指定し、bottomプロパティは要素の下端の位置を指定します。基準となる位置はpositionプロパティの値によって異なり、relativeでは元の位置、absoluteでは親要素、fixedではビューポートが基準です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: #ecf0f1;
      margin: 20px;
    }
    .box-top {
      position: absolute;
      top: 20px;
      width: 100px;
      height: 50px;
      background-color: #3498db;
    }
    .box-bottom {
      position: absolute;
      bottom: 20px;
      width: 100px;
      height: 50px;
      background-color: #e74c3c;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box-top">Top: 20px</div>
    <div class="box-bottom">Bottom: 20px</div>
  </div>
</body>
</html>

上記のコードでは、親要素内に2つのabsolute要素を配置、1つ目はtop: 20pxで上端から20pxの位置、2つ目はbottom: 20pxで下端から20pxの位置に配置しています。topとbottomを同時に指定すると、要素の高さが自動的に計算されます。

left・rightで横位置を指定する

leftプロパティは要素の左端の位置を指定し、rightプロパティは要素の右端の位置を指定します。縦位置の指定と同様に、基準点はpositionプロパティの値によって変わり、%単位を使用すると親要素のサイズに対する相対的な位置指定が可能です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      background-color: #ecf0f1;
      margin: 20px;
    }
    .box-left {
      position: absolute;
      left: 20px;
      width: 100px;
      height: 50px;
      background-color: #2ecc71;
    }
    .box-right {
      position: absolute;
      right: 20px;
      width: 100px;
      height: 50px;
      background-color: #f39c12;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box-left">Left: 20px</div>
    <div class="box-right">Right: 20px</div>
  </div>
</body>
</html>

上記のコードでは、1つ目の要素をleft: 20pxで左端から20pxの位置に、2つ目の要素をright: 20pxで右端から20pxの位置に配置しています。leftとrightを同時に指定すると、要素の幅が自動的に計算され、レスポンシブなレイアウトを実現できます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

4つを組み合わせて配置する

top・bottom・left・rightの4つを組み合わせることによって、要素のサイズと位置を同時に制御できます。この方法は、親要素のサイズに応じて子要素を伸縮させたい場合に使用され、レスポンシブデザインで特に有効です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 300px;
      background-color: #ecf0f1;
      margin: 20px;
    }
    .overlay {
      position: absolute;
      top: 20px;
      right: 20px;
      bottom: 20px;
      left: 20px;
      background-color: rgba(52, 152, 219, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="overlay">Overlay</div>
  </div>
</body>
</html>

上記のコードでは、4つのプロパティ全てに20pxを指定することによって、親要素の内側に20pxの余白を持つオーバーレイ要素を作成しています。この要素は親要素のサイズに追従して自動的にサイズが変わるため、width・heightプロパティを指定する必要がありません。モーダルウィンドウやオーバーレイ表示など、親要素全体を覆う要素を作成する際によく使用されます。

CSSのrelativeとabsoluteを組み合わせて要素を配置する方法

relativeとabsoluteは実務でよく使われる組み合わせで、親要素を基準に子要素を自由に配置できます。この組み合わせを理解することによって、画像の上にテキストを重ねたり、アイコンを特定の位置に配置したりするレイアウトを簡単に実現できます。

relativeとabsoluteを組み合わせて要素を配置する方法として、以下の3つがあります。

親要素にrelativeを指定する
子要素にabsoluteを指定する
画像の上に要素を重ねる

それぞれの方法は、「基準となる要素の設定」と「配置する要素の位置指定」を正しく理解することが重要です。親要素にrelativeを指定しないと、absolute要素がウィンドウ全体を基準に配置されてしまうため、注意が必要です。

それでは各項目について、詳しく解説していきます。

親要素にrelativeを指定する

親要素にposition: relativeを指定することによって、その要素が子要素のabsolute配置の基準点となります。relativeを指定した親要素自体は通常のレイアウトから動かず、子要素の配置基準としてのみ機能するため、top・bottom・left・rightの指定は不要です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #ecf0f1;
      padding: 20px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>カードタイトル</h2>
    <p>この要素がabsolute要素の配置基準になります。</p>
  </div>
</body>
</html>

上記のコードでは、cardクラスにposition: relativeを指定しています。この状態だと見た目に変化はありませんが、この要素内にabsolute要素を配置すると、cardの左上が基準点となります。カード型のレイアウトやバナー画像など、特定の領域内で子要素を配置したい場合に使用されます。

子要素にabsoluteを指定する

親要素にrelativeを指定した後、子要素にposition: absoluteを指定することによって、親要素を基準とした自由な配置が可能になります。この時、top・bottom・left・rightを使って具体的な位置を指定し、親要素内での配置場所を決定します。

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #ecf0f1;
      padding: 20px;
      margin: 20px;
    }
    .badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #e74c3c;
      color: white;
      padding: 5px 10px;
      border-radius: 3px;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="badge">NEW</div>
    <h2>カードタイトル</h2>
    <p>右上にバッジが配置されています。</p>
  </div>
</body>
</html>

上記のコードでは、badgeクラスにposition: absoluteを指定し、top: 10pxとright: 10pxで親要素の右上に配置しています。absolute要素は通常のドキュメントフローから外れるため、他のコンテンツと重なることなく独立して配置されます。バッジ表示やクローズボタン、ステータス表示など、コンテンツに重ねて表示したい要素に使用されます。

画像の上に要素を重ねる

relativeとabsoluteの組み合わせは、画像の上にテキストやボタンを重ねる実装でも頻繁に使用されます。画像を含む親要素にrelativeを指定し、テキストやボタンにabsoluteを指定することによって、画像上の任意の位置に要素を配置できます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      position: relative;
      width: 400px;
      height: 300px;
      margin: 20px;
    }
    .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .overlay-text {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 10px 20px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="sample.jpg" alt="サンプル画像">
    <div class="overlay-text">画像の説明テキスト</div>
  </div>
</body>
</html>

上記のコードでは、image-containerにrelativeを指定し、その中の画像とテキストを配置しています。テキストにはabsoluteを指定、bottom: 20pxとleft: 20pxで画像の左下に配置、半透明の黒背景をつけることで視認性を確保しています。この手法はヒーロー画像やカード型レイアウト、バナー広告など、画像とテキストを組み合わせたデザインで広く使用されます。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。