CSSの「position: relative」とは？相対配置の基本と使い方を解説
CSSのposition: relative;は、要素を通常の表示位置を基準とした相対的な位置に配置するためのプロパティです。このプロパティを指定すると、top・right・bottom・leftなどのオフセットプロパティを使って、元の位置からどれだけずらすかを細かく制御できるようになります。
重要なポイントとして、position: relativeを指定した要素は、あくまで「本来あるべき位置」を基準に移動するため、周囲の他の要素のレイアウトには影響を与えません。元のスペースはそのまま保持される点が特徴です。
以下のコードを実行すると、position: relative;の実際の動作を確認できます。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
left: 20px;
border: 3px solid blue;
}
</style>
</head>
<body>
<h1>Positioning Element</h1>
<div>
div element with position: relative;
</div>
</body>
</html>
コードの解説
- position: relative; … 要素を相対配置に設定します。
- left: 20px; … 通常の位置から右方向に20pxずらして表示します。
- border: 3px solid blue; … 要素の範囲がわかりやすいよう、青色の枠線を追加しています。
実行結果
このように、left: 20px;を指定することで、青い枠線のdiv要素が通常の位置より20px右にずれて表示されます。相対配置は、微調整や絶対配置（position: absolute）の基準コンテナとしてもよく使われる、CSSレイアウトの基本的なテクニックです。
-
CSSのbackground-positionプロパティで背景画像の位置を設定する方法
background-positionプロパティとはCSSのbackground-positionプロパティは、背景画像の表示開始位置（初期位置）を、原点を基準として設定するために使用します。キーワード（top、bottom、left、right、center）、パーセンテージ、またはpxなどの長さの値を組み合わせて指定でき、複数の背景画像がある場合には、カンマで区切って各画像に個別の位置を割り当てることも可能です。構文background-positionプロパティの基本的な書式は以下のとおりです。セレクタ { background-positi
-
CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け
CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に