position を使って要素を配置してみよう

前のページでは、

• max-width
• margin: 0 auto
• container

を使って、

中央寄せレイアウト

を作りました。

今回は、

• position
• absolute
• relative
• fixed

などを使って、

要素を自由な位置へ配置する方法

を学んでいきます

---

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

---

position とは？

position は、

要素の配置方法

を変更するCSSです。

---

普通のHTMLの流れ

通常、HTML は、

上から順番

に並びます。

例えば、

<div>1</div>
<div>2</div>
<div>3</div>

なら、

• 1
• 2
• 3

のように縦方向へ並びます。

---

position を使うと自由度が増える

position を使うと、

好きな位置へ移動

しやすくなります。

---

よく使う position

今回学ぶのは、

• relative
• absolute
• fixed

です。

---

relative とは？

position: relative;

は、

「基準位置を持つ」

イメージです。

---

まずは書いてみよう

<div class="card">

  <div class="badge">
    NEW
  </div>

  <h2>記事タイトル</h2>

</div>

---

CSS を書いてみよう

.card {
  position: relative;

  padding: 24px;

  background-color: white;

  border-radius: 12px;
}

.badge {
  position: absolute;

  top: 16px;
  right: 16px;

  padding: 4px 8px;

  background-color: #ef4444;
  color: white;

  border-radius: 999px;
}

---

absolute とは？

position: absolute;

は、

自由な位置へ配置

するためのCSSです。

---

top と right

今回、

top: 16px;
right: 16px;

を書いています。

これは、

• 上から16px
• 右から16px

を意味しています。

---

なぜ relative が必要なの？

ここが非常に重要です。

もし、

.card {
  position: relative;
}

を書かないと、

画面全体基準

になってしまうことがあります。

---

relative は「absolute の基準」

つまり、

position: relative;

は、

absolute の位置基準を作る

ためによく使われます。

---

---

イメージ

card の中の右上

へ配置したいので、

card を基準

にしています。

---

fixed とは？

次は、

position: fixed;

です。

---

fixed の特徴

fixed は、

画面へ固定

されます。

---

実際に書いてみよう

<button class="fixed-button">
  TOP
</button>

.fixed-button {
  position: fixed;

  right: 24px;
  bottom: 24px;

  padding: 16px;

  border: none;

  border-radius: 999px;

  background-color: #2563eb;
  color: white;
}

---

スクロールしても残る

fixed は、

スクロールしても位置固定

されます。

そのため、

• TOPへ戻るボタン
• 固定メニュー
• チャットボタン

などでよく使われます。

---

bottom とは？

bottom: 24px;

は、

下から24px

を意味しています。

---

left / right / top / bottom

position 系では、

CSS	意味
top	上から
right	右から
bottom	下から
left	左から

を使います。

---

z-index もよく使う

position を使うと、

要素が重なる

ことがあります。

そんなときは、

z-index

を使います。

---

z-index とは？

z-index: 10;

のように書くと、

前面へ表示

されやすくなります。

数字が大きいほど前に来ます。

---

実際のWeb制作でも超重要

position は、

• モーダル
• メニュー
• バッジ
• ツールチップ
• 固定ボタン

などで大量に使われています。

---

---

最初は relative + absolute を覚えよう

最初は、

• relative が基準
• absolute が移動

くらいの理解で十分です

---

今回学んだこと

今回学んだこと：

• position
• relative
• absolute
• fixed
• top
• right
• bottom
• left
• z-index

などです。

---

次のページでは

次のページでは、

• overflow
• スクロール
• はみ出し制御

などを使って、

「要素の見切れやスクロール制御」

を学んでいきます