CSS配置の基礎: relativeとfixed

CSSの「position: relative」と「position: fixed」の解説

日本語

CSSのpositionプロパティは、要素の配置方法を指定します。その中でも、relativeとfixedは、要素の配置位置を基準とする方法が異なります。

position: relative

• 相対的な配置
  要素を基準位置からオフセット（移動）させることができます。
  • top, right, bottom, leftプロパティを使って、上下左右に移動します。
  • 例: position: relative; top: 20px; left: 30px;は、要素を基準位置から20ピクセル下、30ピクセル右に移動します。
• 基準
  要素のデフォルトの位置（通常は親要素の左上隅）

position: fixed

• 固定的な配置
  要素をブラウザのビューポートに対して固定します。
  • 要素はスクロールしても画面上で常に同じ位置に表示されます。
  • 例: position: fixed; top: 10px; right: 20px;は、要素をビューポートの上端から10ピクセル、右端から20ピクセル離れた位置に固定します。
• 基準
  ブラウザのビューポート（表示領域）

要約

• fixedは、要素をブラウザのビューポートに対して固定します。
• relativeは、要素を親要素に対して相対的に配置します。

イメージ
[画像：CSSのposition: relativeとfixedの例]

注意

• 適切なプロパティと値を組み合わせることで、さまざまな配置方法を実現できます。
• relativeとfixedを使用する際には、他の要素とのレイアウトやスクロールの影響を考慮する必要があります。

CSS配置の基礎: relativeとfixedの例

.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.element {
  position: relative;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

• 解説
  
  • .containerは、幅300ピクセル、高さ200ピクセルの黒い枠線を持つコンテナです。
  • .elementは、幅100ピクセル、高さ100ピクセルの青い要素です。
  • position: relative;により、.elementは親要素である.containerに対して相対的に配置されます。
  • top: 20px;とleft: 30px;により、.elementは.containerの左上隅から20ピクセル下、30ピクセル右に移動します。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  overflow: auto;
}

.element {
  position: fixed;
  top: 10px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}

• 解説
  
  • position: fixed;により、.elementはブラウザのビューポートに対して固定されます。
  • top: 10px;とright: 20px;により、.elementはビューポートの上端から10ピクセル、右端から20ピクセル離れた位置に固定されます。
  • .containerをスクロールしても、.elementは画面上で常に同じ位置に表示されます。

親要素に position: relative を設定する

• 子要素に position: absolute を設定し、親要素に対して相対的に配置します。

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.element {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}

親要素に overflow: hidden を設定する

• 親要素に overflow: hidden を設定することで、子要素が親要素の境界を超えないようにします。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.element {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}

Flexbox を使用する

• 親要素に display: flex を設定し、子要素に align-self: flex-end や align-self: flex-start などのプロパティを使用して、親要素に対して相対的に配置します。

.container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.element {
  width: 100px;
  height: 100px;
  background-color: red;
}