CSSのrelativeとabsoluteの違いと使い分け方を徹底解説！初心者向け表示と位置指定

1. relativeの特徴と使い方

1. relativeの特徴と使い方

relativeは要素を元の位置から上下左右に少しずらすためのCSSのposition指定です。文章や他の要素の流れに影響を与えずに調整できるので、レイアウトを崩さずに位置を調整するのに向いています。

<style>
    .box-relative {
        position: relative;
        top: 10px;
        left: 20px;
        background-color: lightgreen;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-bottom: 10px;
    }
</style>

<div class="box-relative">relativeのボックス</div>
<p>この文章はボックスの元の位置の下に自然に表示されます。</p>

2. absoluteの特徴と使い方

2. absoluteの特徴と使い方

absoluteは親要素を基準に自由に要素を配置できるposition指定です。親要素にrelativeを設定することで、その親の中で上下左右の座標を指定して自由に動かせます。文章の流れとは関係なく表示されるため、デザイン上の特定の場所に要素を固定したいときに便利です。

<style>
    .container {
        position: relative;
        width: 300px;
        height: 150px;
        background-color: #f0f8ff;
    }
    .box-absolute {
        position: absolute;
        top: 20px;
        left: 30px;
        width: 100px;
        height: 50px;
        background-color: lightcoral;
        line-height: 50px;
        text-align: center;
    }
</style>

<div class="container">
    <div class="box-absolute">absoluteのボックス</div>
</div>
<p>absoluteは親要素内で自由に位置を指定できます。</p>

3. relativeとabsoluteの違いと使い分け

3. relativeとabsoluteの違いと使い分け

relativeは要素の元の位置を基準にして少しずらすだけで、文章や他の要素の位置は影響を受けません。一方absoluteは親要素を基準に自由に配置でき、文章の流れに関係なく表示されます。

使い分けのポイントは、文章の流れを崩したくない場合はrelative、特定の位置にボックスを自由に置きたい場合はabsoluteを使うことです。

<style>
    .container-relative {
        position: relative;
        width: 300px;
        height: 150px;
        background-color: #e0f7fa;
    }
    .box-relative-inside {
        position: relative;
        top: 10px;
        left: 10px;
        width: 80px;
        height: 40px;
        background-color: lightpink;
        line-height: 40px;
        text-align: center;
    }
    .box-absolute-inside {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 80px;
        height: 40px;
        background-color: lightskyblue;
        line-height: 40px;
        text-align: center;
    }
</style>

<div class="container-relative">
    <div class="box-relative-inside">relative</div>
    <div class="box-absolute-inside">absolute</div>
</div>

4. relativeとabsoluteを使った応用例

4. relativeとabsoluteを使った応用例

relativeとabsoluteを組み合わせることで、デザインの自由度が大きく広がります。例えば、画像の上に文字を重ねたり、ボタンを特定の場所に固定したりすることができます。親要素にrelativeを設定し、その中で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>