相対配置

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 56/76。

CSSにおいて、相対配置（relative positioning）は、要素をドキュメントフロー内の通常の位置を基準にして配置できるようにする配置スキームです。要素が position: relative; に設定されると、その要素は通常のフロー内に留まりますが、top、right、bottom、および left プロパティを使用して、元の位置からオフセットさせることができます。

相対配置を使用するための基本的な構文は以下の通りです：

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: この宣言は、要素の配置スキームを相対的に設定します。
top, right, bottom, left: これらのプロパティは、要素の通常の位置からのオフセットを指定します。ピクセル（px）、em（em）、パーセンテージ（%）、またはその他の有効なCSS単位で指定された、正または負の値を使用できます。

例えば：

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

この例では、クラスboxを持つ要素は、ドキュメントフロー内の通常の位置から下に20ピクセル、右に30ピクセルの位置に配置されます。元々占めていたスペースは保持され、他の要素がそのスペースに流れ込むことはありません。

チャレンジ

簡単

3つの子要素の <div>（クラス名は box1、box2、box3）を持つ <div> 要素が含まれるHTMLドキュメントが与えられています。あなたのタスクは、相対配置（relative positioning）を使用して box2 要素を移動させることです。以下の手順に従ってください。

クラス box2 を持つ <div> 要素をターゲットにするCSSルールを記述してください。
.box2 要素の position プロパティを relative に設定してください。
.box2 要素の top プロパティを 20px に、left プロパティを 40px に設定してください。これにより、ボックスは通常の位置から下に20ピクセル、右に40ピクセル移動します。

チートシート

相対配置（Relative positioning）を使用すると、position: relative; を使って、ドキュメントフロー内の通常の位置を基準に要素を配置できます。

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

要素は通常のフローに残りますが、top、right、bottom、left プロパティを使用してオフセット（ずらすこと）が可能です。元のスペースは保持されます。

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

これにより、要素は通常の位置から下に 20px、右に 30px 移動します。

自分で試してみよう

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>