犬の手も借りたいあなたに最適な記事を届けます

【CSS】Positionの使い方を簡単に徹底解説

1. positionプロパティとは

CSSのpositionプロパティは、要素の配置方法を指定するために使用されます。このプロパティを使用することで、Webサイトのレイアウトを自由自在に調整することができます。

2. positionプロパティの値

positionプロパティには、以下の5つの値があります。

2-1. static

positionプロパティを指定しない場合、要素はデフォルトでstaticとなります。staticの要素は、通常のレイアウトフローに従い配置されます。

2-2. relative

relativeの要素は、通常のレイアウトフローに従い配置されますが、位置を相対的に指定することができます。つまり、top、bottom、left、rightプロパティを使用して、自身の位置を相対的に変更することができます。

2-3. absolute

absoluteの要素は、親要素の位置を基準にして配置されます。つまり、親要素がrelative、absolute、fixed、stickyである場合、要素はその要素を基準にして位置を指定することができます。

2-4. fixed

fixedの要素は、ブラウザのビューポートを基準にして位置を指定することができます。スクロールしても要素は画面に固定されたままになります。

2-5. sticky

stickyの要素は、スクロールしたときに要素が指定された位置に固定されるようになります。要素は、固定された位置に達すると固定され、スクロールがその位置を超えると通常のレイアウトに戻ります。

スポンサーリンク

3. positionプロパティの使い方

positionプロパティは、要素の配置方法を指定するためのプロパティです。positionプロパティは、以下の値を取ることができます。

  • static
  • relative
  • absolute
  • fixed
  • sticky

デフォルト値はstaticであり、要素をそのままの位置に配置します。その他の値を使用することで、要素を自由自在に配置することができます。positionプロパティを使用すると、top、bottom、left、rightプロパティを使用して、要素の位置を指定することができます。

3-1. 要素を指定の位置に配置する方法

positionプロパティを使用すると、要素を指定の位置に配置することができます。positionプロパティには、relative、absolute、fixed、stickyなどの値があります。

3-1-1 position: relative

relativeの要素は、その要素が通常の位置から相対的に移動されます。要素の元の位置を保持しながら、top、bottom、left、rightプロパティを使用して移動することができます。

css

Copy code

.relative-element {

  position: relative;

  top: 20px;

  left: 20px;

}

上記のCSSコードは、relativeの要素を20px下と20px右に移動します。

3-1-2. position: absolute

absoluteの要素は、親要素に対して絶対的な位置指定を行います。要素を通常の文書フローから取り外し、親要素の位置からの相対的な距離を指定することができます。この場合、親要素はpositionプロパティがstatic以外である必要があります。

css

Copy code

.absolute-element {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

上記のCSSコードは、absoluteの要素を親要素の中央に配置します。この場合、top: 50%;とleft: 50%;を指定して要素を中央に移動します。そして、transform: translate(-50%, -50%);を使用して、要素を中央に配置します。

3-1-3. position: fixed

fixedの要素は、ビューポートの固定位置に配置されます。スクロールしても要素の位置は変わらず、常に同じ場所に表示されます。

css

Copy code

.fixed-element {

  position: fixed;

  top: 0;

  right: 0;

}

上記のCSSコードは、fixedの要素を右上に配置します。この場合、top: 0;とright: 0;を指定して要素を右上に移動します。

3-1-4. position: sticky

stickyの要素は、親要素内で通常の文書フローに従って配置されますが、スクロールが指定されたオフセットに達したときに固定されます。

css

Copy code

.sticky-element {

  position: sticky;

  top: 0;

}

上記のCSSコードは、stickyの要素をページトップに固定します。この場合、top: 0;を指定して要素をページトップに固定します。

以上のように、positionプロパティを使用することで、要素を自由自在に配置することができます。

適切に使用することで、Webサイトのデザインに多彩な表現を与えることができます。

しかし、positionプロパティを適切に使用しない場合、レイアウトの崩れやパフォーマンスの低下など、予期せぬ問題が発生することがあります。

そのため、positionプロパティを使用する際には、注意して使用するようにしましょう。

3-2. 要素のレイアウトに影響する方法

positionプロパティは、要素の配置だけでなく、要素のレイアウトにも影響を与えます。

たとえば、absoluteやfixedの要素は、その要素を基準にして、親要素のレイアウトが崩れる可能性があります。

また、relativeやabsoluteの要素には、z-indexプロパティを使用して、要素のスタッキング順序を指定することができます。

4. positionプロパティの実例

4-1. position: relativeの実例

css

Copy code

.relative-element {

  position: relative;

  top: 20px;

  left: 20px;

}

上記のCSSコードは、relativeの要素を20px下と20px右に移動します。相対的な位置指定をする場合は、top、bottom、left、rightプロパティを使用します。

4-2. position: absoluteの実例

css

Copy code

.absolute-element {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

上記のCSSコードは、absoluteの要素を親要素の中央に配置します。この場合、top: 50%;とleft: 50%;を指定して要素を中央に移動します。そして、transform: translate(-50%, -50%);を使用して、要素を中央に配置します。

4-3. position: fixedの実例

css

Copy code

.fixed-element {

  position: fixed;

  top: 0;

  right: 0;

}

上記のCSSコードは、fixedの要素を右上に配置します。この場合、top: 0;とright: 0;を指定して要素を右上に移動します。

スポンサーリンク

5. まとめ

この記事では、positionプロパティについて解説しました。

positionプロパティは、要素の配置方法を指定するために使用されます。

また、positionプロパティを使用することで、要素のレイアウトにも影響を与えることができます。

Webサイトのレイアウトを自由自在に調整するために、positionプロパティを上手に活用しましょう。