• 5つのposition値（static、relative、absolute、fixed、sticky）の違いを理解する
• 文書フローという概念を理解する
• 実際にpositionを使ってレイアウトを作れるようになる

1. positionプロパティとは

CSSのpositionプロパティは、HTML要素を「どこに配置するか」を決めるプロパティです。positionを使うと、Webページ上で要素を自由にレイアウトすることができるようになります。

positionの5つの値と特徴

positionには５つの値があります。それぞれの特徴を理解することがpositionを使いこなすために重要です。

2. 文書フローを理解しよう

文書フローとは、HTML要素が「普通の順序」で上から下、左から右に自動的に配置される流れのことです。positionを使いこなすために文書フローを理解する必要があります。

文書フローの特徴

文書フローは２つに分類することができます。レッスン９で学習したブロック要素とインライン要素です。ここで、それぞれの特徴について簡単に復習をしましょう。

positionによる文書フローへの影響

それぞれの値が文書フローに従うか外れるかをまとめています。ここで押さえておきたいこととしては、通常の文書フローから外れるプロパティです。absoluteとfixedは文書フローから外れるため注意が必要です。

3. position: static（初期値）

staticは、すべての要素のデフォルト値です。「普通の配置」で、特別なことは何もしません。

特徴

• 通常の文書フローに従って配置される
• top, right, bottom, leftの指定は効かない
• わざわざ指定することはほとんどない

.box {
  position: static; /* 初期値なので普通は書かない */
}

4. position: relative（相対配置）

relativeは、「元の位置から少しずらす」配置方法です。元の場所は保持されたまま、見た目だけが移動します。

特徴

• 元の位置を基準に、top、left、right、bottomで移動
• 元のスペースは保持される（他の要素には影響しない）
• absolute要素の基準点としてもよく使われる

.box {
  position: relative;
  top: 20px;    /* 下に20pxずらす */
  left: 30px;   /* 右に30pxずらす */
}

5. position: absolute（絶対配置）

absoluteは、「完全に自由な位置」に要素を配置する方法です。文書フローから外れるため、他の要素に影響を与えません。

特徴

• 文書フローから完全に外れる
• 一番近い「position: relative」の祖先要素を基準に配置
• 基準がない場合は、ブラウザの画面全体が基準になる
• top、left、right、bottomで正確な位置を指定

.parent {
  position: relative; /* 基準を作る */
}

.child {
  position: absolute;
  top: 10px;    /* 親の上端から10px */
  right: 10px;  /* 親の右端から10px */
}

6. position: fixed（固定配置）

fixedは、ブラウザの画面に要素を固定する方法です。スクロールしても位置が変わりません。

特徴

• ビューポート（画面の表示領域）を基準に配置
• スクロールしても位置は変わらない
• ヘッダーメニューや「トップへ戻る」ボタンでよく使われる
• 文書フローから外れる

.fixed-header {
  position: fixed;
  top: 0;        /* 画面の一番上 */
  left: 0;       /* 画面の一番左 */
  width: 100%;   /* 画面の幅いっぱい */
  background: #333;
  color: white;
}

7. position: sticky（粘着配置）

stickyは、「スクロールすると途中から固定される」配置方法です。relativeとfixedを組み合わせたような動作をします。

特徴

• 普段は通常の文書フローに従う
• スクロールで指定位置に達すると固定される
• 親要素の領域を超えると固定が解除される
• ナビゲーションメニューなどでよく使われる

.sticky-nav {
  position: sticky;
  top: 20px;  /* 画面上端から20pxの位置で固定 */
  background: #007bff;
  color: white;
}

今日のまとめ

学んだpositionプロパティを使って、実際にレイアウトを作ってみましょう。右側のエディタで試してみてください。

演習1：relative で要素をずらしてみよう

以下のサンプルコードを参考に、2番目のボックスを少しずらしてみましょう。

<style>
  .box {
    padding: 20px;
    margin: 10px 0;
    background: #e3f2fd;
    border: 2px solid #1976d2;
  }
  
  .box2 {
    position: relative;
    /* ここに top と left を追加してみよう */
    background: #fff3e0;
    border-color: #f57c00;
  }
</style>                       

<div class="container">
  <div class="box box1">ボックス1</div>
  <div class="box box2">ボックス2（これをずらそう）</div>
  <div class="box box3">ボックス3</div>
</div>

やってみよう：

1. 上記のコードをエディタに貼り付ける
2. .box2に top: 15px; と left: 30px; を追加
3. ボックス2がずれて、ボックス3の位置は変わらないことを確認

<style>
  .box {
    padding: 20px;
    margin: 10px 0;
    background: #e3f2fd;
    border: 2px solid #1976d2;
  }
  
  .box2 {
    position: relative;
    top: 15px;    /* 下に15pxずらす */
    left: 30px;   /* 右に30pxずらす */
    background: #fff3e0;
    border-color: #f57c00;
  }
</style>                                   

<div class="container">
  <div class="box box1">ボックス1</div>
  <div class="box box2">ボックス2（これをずらそう）</div>
  <div class="box box3">ボックス3</div>
</div>

演習2：absolute で自由配置してみよう

親要素の中で、子要素を自由な位置に配置してみましょう。

<style>
  .parent {
    position: relative;
    height: 200px;
    background: #f5f5f5;
    border: 2px solid #666;
    padding: 20px;
  }
  
  .absolute-child {
    position: absolute;
    /* ここに位置を指定してみよう */
    background: #ff5722;
    color: white;
    padding: 10px;
    border-radius: 4px;
  }
</style>                       

<div class="parent">
  <p>親要素の中身</p>
  <div class="absolute-child">自由配置される子要素</div>
</div>

やってみよう：

1. 上記のコードをエディタに貼り付ける
2. .absolute-childに位置を指定：
   • top: 10px; right: 10px;（右上）
   • bottom: 10px; left: 10px;（左下）
3. いろいろな位置に配置してみる

<style>
  .parent {
    position: relative;
    height: 200px;
    background: #f5f5f5;
    border: 2px solid #666;
    padding: 20px;
  }
  
  .absolute-child {
    position: absolute;
    top: 10px;     /* 親要素の上端から10px */
    right: 10px;   /* 親要素の右端から10px */
    background: #ff5722;
    color: white;
    padding: 10px;
    border-radius: 4px;
  }
</style>

<div class="parent">
  <p>親要素の中身</p>
  <div class="absolute-child">自由配置される子要素</div>
</div>

演習3：固定ヘッダーを作ってみよう

画面の上部に固定されるヘッダーを作ってみましょう。

<style>
  .fixed-header {
    position: fixed;
    /* ここに位置とスタイルを指定してみよう */
    width: 100%;
    background: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }
  
  .content {
    /* ヘッダーの高さ分だけ上にマージンを取る */
    margin-top: 60px;
    padding: 20px;
  }
</style>                       

<div class="fixed-header">固定ヘッダー</div>
<div class="content">
  <h2>メインコンテンツ</h2>
  <p>このコンテンツをスクロールしても、上のヘッダーは固定されます。</p>
  <p>たくさんのコンテンツ...</p>
  <p>たくさんのコンテンツ...</p>
  <p>たくさんのコンテンツ...</p>
</div>

やってみよう：

1. 上記のコードをエディタに貼り付ける
2. .fixed-headerに top: 0; left: 0; を追加
3. プレビューでスクロールして、ヘッダーが固定されることを確認

<style>
  .fixed-header {
    position: fixed;
    top: 0;        /* 画面の上端に固定 */
    left: 0;       /* 画面の左端から配置 */
    width: 100%;
    background: #333;
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000; /* 他の要素より前面に表示 */
  }
  
  .content {
    /* ヘッダーの高さ分だけ上にマージンを取る */
    margin-top: 60px;
    padding: 20px;
  }
</style>                                   

<div class="fixed-header">固定ヘッダー</div>
<div class="content">
  <h2>メインコンテンツ</h2>
  <p>このコンテンツをスクロールしても、上のヘッダーは固定されます。</p>
  <p>たくさんのコンテンツ...</p>
  <p>たくさんのコンテンツ...</p>
  <p>たくさんのコンテンツ...</p>
</div>

このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。

• CSSリファレンス - position プロパティ

次回（レッスン12）はレスポンシブデザインについて学びます。スマートフォン、タブレット、PCなど異なる画面サイズに対応するデザイン手法を学びましょう。