CSSで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を追加して重なり順も試してみると、実践的なレイアウトのコツが身につきます。
