配置の基本

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

CSSでは、ポジショニングは、Webページ上の要素の位置を制御できるプロパティの集合です。デフォルトでは、要素はHTMLドキュメントの通常のフローに従って配置されます。しかし、CSSのポジショニングを使うと、要素を通常のフローから外し、包含要素またはビューポート（ブラウザーウィンドウの表示領域）を基準にした特定の場所に配置できます。

positionプロパティにはいくつかの値があり、それぞれ固有の動作をします。

static：これはデフォルト値です。要素はドキュメントの通常のフローに従って配置されます。top、right、bottom、leftプロパティは効果がありません。

relative：要素は通常の位置を基準に配置されます。top、right、bottom、leftプロパティを設定すると、要素は通常の位置から移動しますが、通常のフロー内では引き続き領域を占有します。

absolute: 要素は通常のフローから外され、最も近い位置指定された祖先要素（static 以外の position を持つ祖先要素）を基準に配置されます。位置指定された祖先要素が見つからない場合は、初期包含ブロック（通常はビューポート）を基準に配置されます。

fixed：要素は通常のフローから外され、ビューポートを基準に配置されます。ページをスクロールしても、配置された場所に固定されたままです。

positionプロパティを使用する基本的な構文は次のとおりです：

selector {
    position: value;
}

value: 希望する配置動作（例: static、relative、absolute、fixed、sticky）。

チャレンジ

簡単

positionプロパティを使用して要素の配置コンテキストを変更するHTMLドキュメントが与えられます。このドキュメントには、1つの子要素を含む親要素（<div>）があります。以下の手順に従ってください：

containerクラスを持つ<div>要素を対象とするCSSルールを記述します。そのpositionプロパティをrelativeに設定します。これにより、その要素は子要素の配置基準となる祖先要素になります。
boxクラスを持つ<div>要素を対象とするCSSルールを記述します。そのpositionプロパティをabsoluteに設定します。これにより、要素は通常のフローから外れ、最も近い配置基準となる祖先要素（container）を基準に配置できるようになります。
.box要素のtopプロパティを50pxに、leftプロパティを100pxに設定します。これにより、boxは配置基準となる祖先要素（container）の上端から50ピクセル、左端から100ピクセルの位置に配置されます。

自分で試してみよう

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>