CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのpositionプロパティを徹底解説！relative・absolute・fixedの使い分け

CSSで要素を思い通りの位置に配置するには、positionプロパティを使ったポジショニングの仕組みを理解することが重要です。CSSには主に「相対配置（relative）」「絶対配置（absolute）」「固定配置（fixed）」といった配置方法があり、それぞれ基準となる位置や挙動が異なります。本記事では、各ポジショニング方法の特徴と具体的なコード例を交えてわかりやすく解説します。

CSSにおける相対配置（position: relative）

position: relativeを指定すると、要素は通常の表示位置を基準として相対的に移動します。top、left、right、bottomなどのオフセットプロパティと組み合わせることで、元の位置からずらして表示できます。重要なポイントは、要素が移動しても元の位置にあったスペースは保持されるという点です。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
    position: relative;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    left: 50px;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<div class="demo">
position: relative;
</div>
<p>これは別のサンプルテキストです。</p>
</body>
</html>

表示結果

CSSのpositionプロパティを徹底解説！relative・absolute・fixedの使い分け

この例では、オレンジ色のボックスが通常の位置から左方向に50px移動して表示されます。

CSSにおける絶対配置（position: absolute）

position: absoluteを指定すると、要素は最も近い位置指定された祖先要素（positioned ancestor）を基準として配置されます。祖先要素にposition: relativeなどが設定されていない場合は、ページ全体（初期包含ブロック）が基準になります。絶対配置された要素は通常の文書フローから外れるため、他の要素のレイアウトには影響しません。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
    position: relative;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    width: 600px;
    height: 200px;
}
div.demo2 {
    position: absolute;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    top: 50px;
    right: 0;
    width: 300px;
    height: 100px;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
</div>
<p>これは別のサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
</body>
</html>

表示結果

CSSのpositionプロパティを徹底解説！relative・absolute・fixedの使い分け

この例では、親要素demo1にposition: relativeが設定されているため、子要素demo2はその親を基準に、上から50px・右端に寄せた位置に配置されます。

CSSにおける固定配置（position: fixed）

position: fixedを指定した要素は、ブラウザのビューポート（表示領域）を基準として配置され、ページをスクロールしても常に同じ位置に固定されたまま表示されます。ヘッダーバーや「ページトップへ戻る」ボタン、追従型のバナーなどによく使われる配置方法です。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
    position: relative;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    width: 600px;
    height: 200px;
}
div.demo2 {
    position: absolute;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    top: 50px;
    right: 0;
    width: 300px;
    height: 100px;
}
div.demo3 {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 500px;
    border: 3px solid orange;
    color: blue;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
<div class="demo3">
position: fixed;
</div>
</div>
<p>これは別のサンプルテキストです。</p>
</body>
</html>

表示結果

CSSのpositionプロパティを徹底解説！relative・absolute・fixedの使い分け

この例では、demo3の要素が画面右下（下端から0px・右から20px）に固定され、スクロールしてもその位置に留まり続けます。

まとめ：3つのポジショニングの使い分け

  • relative（相対配置）：要素の元の位置を基準にずらしたいときに使用。元のスペースは保持される。
  • absolute（絶対配置）：最も近い位置指定祖先を基準に自由に配置したいときに使用。文書フローから外れる。
  • fixed（固定配置）：画面上の特定の位置に要素を固定表示したいときに使用。スクロールの影響を受けない。

これらの配置方法を適切に組み合わせることで、柔軟で洗練されたレイアウトを実現できます。まずは実際にコードを書いて、それぞれの挙動の違いを体感してみてください。

  1. CSSのbackground-positionプロパティで背景画像の位置を設定する方法

    background-positionプロパティとはCSSのbackground-positionプロパティは、背景画像の表示開始位置（初期位置）を、原点を基準として設定するために使用します。キーワード（top、bottom、left、right、center）、パーセンテージ、またはpxなどの長さの値を組み合わせて指定でき、複数の背景画像がある場合には、カンマで区切って各画像に個別の位置を割り当てることも可能です。構文background-positionプロパティの基本的な書式は以下のとおりです。セレクタ {    background-positi

  2. CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

    CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に