CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの相対配置（position:relative）とは？基本の使い方とサンプルコード

相対配置（relative positioning）とは、HTML要素を通常表示される位置を基準として移動させるCSSの配置方法です。例えば「left:20px」と指定すると、要素の左端の位置から20ピクセル右側へ移動します。

positionプロパティにtopとleftの値を組み合わせることで、HTMLドキュメント内の任意の場所へ要素を自由に移動させることができます。

移動方向と値の関係

  • 左へ移動 … leftに負の値（マイナス）を指定
  • 右へ移動 … leftに正の値（プラス）を指定
  • 上へ移動 … topに負の値（マイナス）を指定
  • 下へ移動 … topに正の値（プラス）を指定

なお、相対配置では元の位置がレイアウト上確保されたままになるため、要素を移動しても周囲の他の要素の配置には影響しません。この点が絶対配置（position:absolute）との大きな違いです。

サンプルコード

以下のコードを実行すると、相対配置の実際の動作を確認できます。

<html>
  <head>
  </head>
  <body>
    <div style = "position:relative;left:80px;top:2px;background-color:yellow;">
      このdiv要素は相対配置されています。
    </div>
  </body>
</html>

この例では、黄色い背景のdiv要素が通常の位置から右へ80ピクセル、下へ2ピクセル移動して表示されます。数値を変更しながら試すことで、相対配置の挙動を直感的に理解できるでしょう。

  1. CSSの相対配置（position:relative）の仕組みと使い方を解説

    CSSでは、要素のpositionプロパティにrelative（相対配置）を指定することで、要素を通常どおりにレンダリングしながら位置を調整できます。相対配置が指定された要素は、CSSの配置プロパティ（top、right、bottom、left）によって、本来の位置から相対的に移動されます。 相対配置の大きな特徴は、要素が元々占めていた領域が保持されるという点です。そのため、要素をずらしても、周囲の他の要素のレイアウトには影響を与えません。 相対配置の基本例 それでは、CSSの相対配置の基本的な例を見てみましょう。 <!DOCTYPE html> <html> <

  2. CSSのfloatプロパティで要素をフロート(回り込み)させる方法

    CSSのfloatプロパティとはCSSのfloatプロパティは、ボックスやコンテンツを配置・整形するために使用されるプロパティです。開発者はfloatを活用することで、要素をコンテナの左側または右側に寄せて配置できます。floatプロパティには、以下のいずれかの値を指定できます。left − 要素がコンテナの左側に浮動しますright − 要素がコンテナの右側に浮動しますnone − 要素は浮動しません(デフォルト値)inherit − 親要素のfloat値を継承しますなお、floatを指定すると後続の要素が回り込むため、レイアウトによってはclearプロパティで回り込みを解除する必要がある点