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

CSSの相対配置（position: relative）とは？基本の使い方を解説

CSSの相対配置（position: relative）とは

相対配置（relative positioning）を使用すると、要素は「本来表示されるはずの通常の位置」を基準として移動されます。この設定には、CSSの position: relative を使用します。

position: relative を指定した要素には、top・right・bottom・left の各プロパティを組み合わせることで、通常の位置からのオフセット（ずれ）を自由に指定できます。なお、相対配置では要素が移動しても元の位置のスペースは保持されるため、周囲の他の要素のレイアウトには影響しないという特徴があります。

サンプルコード

それでは、実際の例を見てみましょう。以下のコードでは、div要素に position: relative と left: 50px を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
    position: relative;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    left: 50px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo">
position: relative;
</div>
<p>This is another demo text.</p>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、橙色の背景と青色の破線ボーダーを持つdiv要素が、本来の位置から右方向へ50pxずれて表示されます。left: 50px は「左端を基準に50px内側へ」という意味になるため、見た目上は要素が右に移動して見えます。

このように、position: relative を使えば、ドキュメントの流れを崩すことなく、特定の要素だけを細かく調整できます。絶対配置（absolute）との違いや、微調整が必要な場面での活用方法を覚えておくと、レイアウト作成の幅が大きく広がります。

  1. CSSの静的ポジショニング（position: static）とは？基本と実例をわかりやすく解説

    CSSにおける静的ポジショニング（static positioning）とは、要素を特別な配置を行わず、通常のドキュメントフローに従って表示する配置方法です。position: static が指定された要素は、left、right、top、bottom といったCSSの配置プロパティの影響を一切受けません。これはCSSにおけるデフォルトの配置方法でもあります。 静的ポジショニングの例 CSSの静的ポジショニングの基本的な例を見てみましょう。 <!DOCTYPE html> <html> <head> <style> p {   &nb

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

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