配置の基本
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 55/76。
CSSにおいて、ポジショニングは、ウェブページ上の要素の配置を制御するためのプロパティのセットです。デフォルトでは、要素は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）。
チャレンジ
簡単親要素の <div> と、その中に含まれる子要素の <div> が記述されたHTMLドキュメントがあります。あなたのタスクは、position プロパティを使用して要素の配置コンテキストを変更することです。以下の手順に従ってください。
containerクラスを持つ<div>要素をターゲットとするCSSルールを記述してください。そのpositionプロパティをrelativeに設定します。これにより、この要素は子要素にとっての配置の基準となる祖先要素になります。boxクラスを持つ<div>要素をターゲットとするCSSルールを記述してください。そのpositionプロパティをabsoluteに設定します。これにより、要素は通常のフローから外れ、最も近い配置済みの祖先要素（container）を基準に配置できるようになります。.box要素のtopプロパティを50pxに、leftプロパティを100pxに設定してください。これにより、ボックスは配置の基準となる祖先要素（container）の上端から50ピクセル、左端から100ピクセルの位置に配置されます。
チートシート
positionプロパティは、ウェブページ上での要素の配置方法を制御します：
selector {
position: value;
}配置の値:
static: 通常のドキュメントフローにおけるデフォルトの配置relative: 通常の位置を基準に相対的に配置され、フロー内でのスペースは保持されますabsolute: 通常のフローから除外され、最も近い位置指定された祖先要素を基準に配置されますfixed: 通常のフローから除外され、ビューポートを基準に配置され、スクロールしても固定されたままになります
top、right、bottom、およびleftプロパティを使用して位置を調整します（staticの場合を除く）。
自分で試してみよう
<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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
