絶対配置

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

CSSでは、絶対配置（absolute positioning）を使用すると、要素をコンテナ内の思い通りの場所に正確に配置できます。

position: absolute; を設定すると、その要素は通常のレイアウトから取り除かれるため、他の要素はそれが存在しないかのように振る舞います。この要素は、位置が設定されている（static ではない）最も近い祖先要素を基準に配置されます。そのような祖先要素がない場合は、ページを基準に配置されます。

絶対配置（absolute positioning）を使用するための基本構文は以下の通りです：

.parent {
    position: relative; /* 親要素を位置指定された祖先要素にする */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: 親要素をターゲットにするCSSセレクター。position: relative; を設定することで、絶対配置（absolute position）された子要素を扱うことが可能になります。

.child: 絶対配置したい要素を対象とするCSSセレクタです。

position: absolute;: この宣言は、要素の配置スキームを absolute に設定し、通常のフローから取り除きます。

top、right、bottom、left: これらのプロパティは、最も近い位置指定された祖先要素を基準とした要素の位置を指定します。ピクセル（px）、em（em）、パーセンテージ（%）、またはその他の有効なCSS単位で指定された、正または負の値を使用できます。

例えば：

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

この例では、.parent 要素は position: relative; を使用して位置指定された祖先として設定されています。.child 要素は position: absolute; を使用して絶対位置に配置され、その位置は最も近い位置指定された祖先（.parent 要素）の上から50ピクセル、左から100ピクセルに設定されています。

チャレンジ

簡単

親要素の <div> と、その中に box1 および box2 というクラスを持つ2つの子要素の <div> が含まれるHTMLドキュメントが与えられています。あなたのタスクは、絶対配置（absolute positioning）を使用して、parent 内で box2 要素を配置することです。以下の手順に従ってください。

parent クラスを持つ <div> 要素をターゲットにするCSSルールを記述します。その position プロパティを relative に設定し、配置の基準となる祖先要素にします。
box2 クラスを持つ <div> 要素をターゲットにするCSSルールを記述します。
.box2 要素の position プロパティを absolute に設定します。
.box2 要素の top プロパティを 30px に、right プロパティを 20px に設定します。これにより、配置の基準となる祖先要素（parent）の上端から30ピクセル、右端から20ピクセルの位置にボックスが配置されます。

チートシート

絶対配置（Absolute positioning）は、要素をコンテナ内の任意の位置に正確に配置します。要素は通常のレイアウトフローから取り除かれ、最も近い位置指定された祖先要素を基準に配置されます。

基本構文:

.parent {
    position: relative; /* 親要素を位置指定された祖先にする */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

例:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

position: absolute; は要素を通常のフローから取り除きます
top、right、bottom、left プロパティは、最も近い位置指定された祖先要素からの相対的な位置を指定します
値はピクセル (px)、em (em)、パーセンテージ (%)、またはその他のCSS単位で指定できます
位置指定された祖先要素が存在しない場合、要素はページを基準に配置されます

自分で試してみよう

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>