positionプロパティの基礎

CSSのpositionプロパティは、要素の配置方法を制御するために使用されます。以下に、異なるposition値（static, relative, absolute, fixed, sticky）を使用した例を示します。

1. Position: Static（デフォルト）

position: staticは、要素が通常のドキュメントフローに従って配置されることを指定します。

html
<div class="static-example">Static Position</div>
css
.static-example {
  position: static;
  border: 2px solid blue;
}

2. Position: Relative

position: relativeは、要素を相対的に移動させることができます。

html
<div class="relative-example">Relative Position</div>
css
.relative-example {
  position: relative;
  top: 20px;
  left: 40px;
  border: 2px solid green;
}

3. Position: Absolute

position: absoluteは、最も近い位置指定された祖先要素に対して絶対的に配置されます。

html
<div class="relative-container">
  <div class="absolute-example">Absolute Position</div>
</div>
css
.relative-container {
  position: relative;
  height: 200px;
  border: 2px solid red;
}

.absolute-example {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 2px solid blue;
}

4. Position: Fixed

position: fixedは、ビューポートに対して固定された位置に要素を配置します。

html
<div class="fixed-example">Fixed Position</div>
css
.fixed-example {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 2px solid purple;
}

5. Position: Sticky

position: stickyは、スクロールに基づいて、相対的かつ固定的な位置の両方の動作をします。

html
<div class="sticky-container">
  <div class="sticky-example">Sticky Position</div>
  <div class="content">Content goes here...</div>
</div>
css
.sticky-example {
  position: sticky;
  top: 10px;
  border: 2px solid orange;
}

.content {
  height: 1000px;
}

これらの例を通じて、positionプロパティの各値の挙動を理解し、適切に使用することができます。実際のウェブページやアプリケーションでこれらのテクニックを試してみると、さらに理解が深まります。

練習問題

目標を読んで、下の回答を見ずに自力で実装してみてください。

課題 1: Fixedなヘッダー

目標

ページの上部に常に表示される固定ヘッダーを作成します。

html
<div class="fixed-header">固定ヘッダー</div>
<div class="content">ここに長いコンテンツが続きます...</div>
css
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.content {
  margin-top: 40px;
  min-height: 200dvh;
  background-color: grey;
}

課題 2: Stickyなヘッダー

目標

スクロール時にページの上部に固定されるヘッダーを作成します。

html
<div>
  <div class="sticky-header">スティッキーヘッダー</div>
  <div class="content">ここに長いコンテンツが続きます...</div>
</div>
<div class="content">ここのコンテンツにはstickyしません</div>
css
.sticky-header {
  position: sticky;
  top: 0;
  background-color: #555;
  color: white;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.sticky-header + .content{
  background-color: brown;
}
.content {
  min-height: 200dvh;
  background-color: grey;
}

課題 3: Absoluteなボタン

目標

特定のコンテナ内に絶対位置指定されたボタンを作成します。

html
<div class="relative-container">
  ここにコンテンツがあります。
  <button class="absolute-button">絶対位置ボタン</button>
</div>
css
.relative-container {
  position: relative;
  border: 1px solid #333;
  padding: 20px;
  height: 200dvh;
}

.absolute-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

課題 4: 2重Stickyなヘッダー

目標

2層のヘッダーを作成し、それぞれがスクロール時にページの上部に固定されるようにします。

html
<div>
  <div class="sticky-header top">上部スティッキーヘッダー</div>
  <div class="content">ここに長いコンテンツが続きます...</div>
  <div class="sticky-header bottom">下部スティッキーヘッダー</div>
  <div class="content">ここに長いコンテンツが続きます...</div>
</div>
<div class="content">ここのコンテンツにはstickyしません</div>
css
.sticky-header {
  position: sticky;
  background-color: #555;
  color: white;
  text-align: center;
  height: 40px;
  line-height: 40px;
  &.top {
    top: 0;
    background-color: #777;
    & + .content{
      background-color: chocolate;
    }
  }
  &.bottom {
    top: 40px;
    background-color: #999;
    & + .content{
      background-color: brown;
    }
  }
}
.content {
  min-height: 200dvh;
  background-color: grey;
}

これらの課題を通じて、position プロパティの様々な使用法を理解し、実践的に適用することができます。各課題を実際にコーディングし、ブラウザでの表示を確認することで、その挙動を視覚的に学ぶことができます。