CSS 配置オフセット

CSSの top、bottom、left、right プロパティは、ポジショニングされた要素（positioned element）の最終的な位置を指定するために使用されます。

1. 配置プロパティの基本 (The top, bottom, left, and right Properties)

これらのプロパティは、要素の境界（エッジ）を、その包含ブロック（containing block）の境界からどれだけ移動させるかを決定します。

重要: これらのプロパティは、position プロパティが static 以外の値（relative, absolute, fixed, sticky）に設定されている要素に対してのみ機能します。

2. top プロパティ (The top Property)

top プロパティは、ポジショニングされた要素の上端（top edge）の位置を指定します。

• relative 配置の場合: 要素は自身の通常の（本来あるべき）位置から下方向に移動します。
• absolute / fixed 配置の場合: 要素は包含要素（またはビューポート）の上端から指定された距離に配置されます。

2.1 top プロパティの使用例

div.relative {
  position: relative;
  top: 20px; /* 本来の位置から20px下に移動 */
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 50px; /* 親要素の上端から50pxの位置に固定 */
  right: 0;
  width: 200px;
  border: 3px solid #73AD21;
}

3. bottom プロパティ (The bottom Property)

bottom プロパティは、ポジショニングされた要素の下端（bottom edge）の位置を指定します。

• relative 配置の場合: 要素は自身の通常の（本来あるべき）位置から上方向に移動します。
• absolute / fixed 配置の場合: 要素は包含要素（またはビューポート）の下端から指定された距離に配置されます。

3.1 bottom プロパティの使用例

div.absolute {
  position: absolute;
  bottom: 10px; /* 親要素の下端から10pxの位置に配置 */
  left: 10px;
  border: 3px solid #73AD21;
}

4. left プロパティ (The left Property)

left プロパティは、ポジショニングされた要素の左端（left edge）の位置を指定します。

• relative 配置の場合: 要素は自身の通常の（本来あるべき）位置から右方向に移動します。
• absolute / fixed 配置の場合: 要素は包含要素（またはビューポート）の左端から指定された距離に配置されます。

4.1 left プロパティの使用例

div.relative {
  position: relative;
  left: 50px; /* 本来の位置から右に50px移動 */
  border: 3px solid #73AD21;
}

5. right プロパティ (The right Property)

right プロパティは、ポジショニングされた要素の右端（right edge）の位置を指定します。

• relative 配置の場合: 要素は自身の通常の（本来あるべき）位置から左方向に移動します。
• absolute / fixed 配置の場合: 要素は包含要素（またはビューポート）の右端から指定された距離に配置されます。

5.1 right プロパティの使用例

div.fixed {
  position: fixed;
  right: 20px; /* 画面（ビューポート）の右端から20pxの位置に固定 */
  bottom: 20px;
  border: 3px solid #73AD21;
}

6. 指定可能な値の種類 (Property Values)

これらのプロパティ（top, bottom, left, right）には、以下の種類の値を設定できます。

       エンジニア向けの Tips: > 同じ要素に対して top と bottom の両方を指定し、さらに height を指定しない場合、その要素は上下に引き伸ばされます。left と right の関係についても同様です。これは、モーダルウィンドウやサイドバーを画面いっぱいに広げたい時によく使われるテクニックです。

7. 配置オフセットプロパティ一覧