CSSでpositionのネスト時の動作を正しく理解しよう！初心者向け解説

positionのネスト時の動作を正しく理解しよう

先生と生徒の会話形式で理解しよう

生徒

「先生、CSSでpositionをネストするときに、親と子でどう違うんですか？」

先生

「positionを理解するには、relativeやabsoluteの動きを親子関係で考えることが重要です。親の位置が子のabsoluteの基準になります。」

生徒

「基準ってどういうことですか？」

先生

「absoluteで配置された子要素は、positionがrelativeやabsoluteなどで設定された親要素を基準にして位置を決めます。親にpositionがない場合はbodyを基準にします。」

生徒

「なるほど。具体例で見てみたいです！」

1. positionの種類と基準について

CSSのpositionには主にstatic、relative、absolute、fixed、stickyがあります。staticはデフォルトで位置指定なし。relativeは自分の通常位置を基準に少し動かせます。absoluteは親要素でpositionが設定されている場合、その親を基準に位置を決めます。fixedは画面全体を基準、stickyはスクロール位置に応じて固定される特別な位置指定です。

2. 親子ネストでのabsoluteの動作

absoluteで配置する子要素は、親要素にposition: relativeを設定すると、その親の枠内で位置を決めます。親にpositionがない場合は、bodyやhtmlを基準にします。このルールを理解すると、カードUIやモーダル、ツールチップなどで正確に要素を重ねたり配置したりできます。

3. サンプルコードで理解するネスト


<style>
    .parent {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: #f8f9fa;
        border: 2px solid #0d6efd;
        margin: 50px auto;
    }
    .child {
        position: absolute;
        top: 20px;
        left: 30px;
        width: 100px;
        height: 50px;
        background-color: #198754;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
</style>

<div class="parent">
    親要素
    <div class="child">子要素</div>
</div>

ブラウザ表示

この例では、子要素は親の左上からtopとleftで20px、30px離れた位置に表示されます。親の枠内で位置が決まるため、予想通りのレイアウトになります。

4. 親にpositionがない場合の動作


<style>
    .no-parent-position {
        width: 300px;
        height: 200px;
        background-color: #f8d7da;
        border: 2px solid #dc3545;
        margin: 50px auto;
    }
    .child2 {
        position: absolute;
        top: 20px;
        left: 30px;
        width: 100px;
        height: 50px;
        background-color: #0d6efd;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
</style>

<div class="no-parent-position">
    親要素
    <div class="child2">子要素</div>
</div>

ブラウザ表示

この場合、子要素はbodyを基準にして配置されます。親の枠の中には収まらないため、意図しない位置に表示されることがあります。絶対配置を使うときは、親にposition: relativeを指定することがポイントです。

5. ネストを活用したUIデザインのポイント

親にposition: relativeを指定して子のabsolute配置を制御する
z-indexと組み合わせて重なり順を管理する
ネストを深くするときは各親のpositionを意識して基準を確認する
ツールチップ、モーダル、カードUIなどで正確に配置できる

この基本を覚えると、複雑なレイアウトでも子要素を思い通りの位置に表示でき、Webデザインの自由度が高まります。

6. 練習して理解を深めよう

まずは親要素にposition: relativeを設定して、子要素をabsoluteで配置してみましょう。topやleftを変えながら表示位置を確認すると、ネスト時のpositionの基準がよく理解できます。その後、z-indexを追加して重なり順も試してみると、実践的なレイアウトのコツが身につきます。