相対配置

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 56/76。

CSSでは、relative positioningは、ドキュメントフロー内の通常の位置を基準にelementを配置できる配置方式です。elementにposition: relative;を設定すると、通常のフローに残りますが、その後top、right、bottom、leftプロパティを使用して、元の位置からずらすことができます。

relative positioning を使用するための基本構文は次のとおりです。

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

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

例：

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

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

チャレンジ

簡単

3つの子 <div>（クラス box1、box2、box3）を含む <div> がある HTML ドキュメントが与えられています。Relative Positioning を使用して box2 element を移動することが課題です。以下の手順に従ってください：

box2 クラスを持つ <div> element を対象とする CSS ルールを Write します。
.box2 element の position property を relative に設定します。
.box2 element の top property を 20px に設定し、left property を 40px に設定します。これにより、box は通常の position から下へ 20 ピクセル、right へ 40 ピクセル移動します。

自分で試してみよう

<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>