1. absolute要素を親ボックス基準で配置する基本ルール

CSSでpositionをabsoluteにすると、その要素は通常、ブラウザ画面全体を基準にして配置されます。ですが、親要素にposition: relativeを付けると、absolute要素はその親の中を基準に動かせるようになります。これは、文章の流れに影響せずにボックスを自由に動かせる方法として非常に便利です。

初心者でも理解しやすく例えると、親ボックスが「机」、absolute要素が「ノート」のようなものです。机の上ならノートを自由に置けますが、机がないと部屋全体を基準にノートを置くことになります。

2. 基本的なHTMLとCSSの書き方

親ボックスにrelative、子ボックスにabsoluteを設定して位置を指定する基本例です。


<style>
    .parent {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: #f0f8ff;
        border: 1px solid #999;
        margin-bottom: 20px;
    }
    .child {
        position: absolute;
        top: 20px;
        left: 30px;
        width: 100px;
        height: 50px;
        background-color: lightcoral;
        line-height: 50px;
        text-align: center;
    }
</style>

<div class="parent">
    <div class="child">absolute</div>
</div>
<p>子要素は親ボックス内の指定した位置に表示されます。</p>

ブラウザ表示

3. top, right, bottom, leftで位置を調整する方法

absolute要素の位置は、top（上）、right（右）、bottom（下）、left（左）で指定できます。親ボックスを基準に距離を指定するため、pxや%、emなどで細かく調整可能です。


<style>
    .child-topright {
        position: absolute;
        top: 10px;
        right: 15px;
        width: 80px;
        height: 40px;
        background-color: lightgreen;
        text-align: center;
        line-height: 40px;
    }
</style>

<div class="parent">
    <div class="child-topright">右上</div>
</div>

ブラウザ表示

4. 親要素を基準に絶対配置するメリット

absolute要素を親ボックス基準で配置すると、レイアウトの自由度が高まります。例えば、ボタンを特定の場所に固定したり、画像の上にテキストを重ねたりできます。文章の流れに影響せずに位置を設定できるため、デザインの調整が簡単になります。


<style>
    .image-container {
        position: relative;
        width: 300px;
        height: 200px;
    }
    .image-text {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: rgba(0,0,0,0.5);
        color: white;
        padding: 5px;
    }
</style>

<div class="image-container">
    <img src="https://via.placeholder.com/300x200" alt="サンプル画像" style="width:100%; height:100%;">
    <div class="image-text">文字を重ねる</div>
</div>

ブラウザ表示