CSSのrelativeとabsoluteの違いと使い分け方を徹底解説！初心者向け表示と位置指定
生徒
「先生、CSSでrelativeとabsoluteってよく出てくるんですけど、どう違うんですか？」
先生
「relativeは要素を元の位置から少しずらすときに使い、absoluteは親要素を基準に自由に配置するときに使います。」
生徒
「元の位置からずらすって、具体的にどういうことですか？」
先生
「例えば文章の流れの中でボックスを少し右に動かしたい場合、relativeを使うと自然な並びを崩さずに移動できます。」
生徒
「なるほど。absoluteはどういうときに使うんですか？」
先生
「absoluteは親要素に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の特徴と使い方
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の違いと使い分け
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を使った応用例
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>
