position: absolute と position: relative の違いと使い分け
HTMLとCSSにおける「Position absolute but relative to parent」
HTMLとCSSで要素を配置する際、「position」プロパティは重要な役割を果たします。このプロパティには様々な値があり、それぞれ異なる配置方法を指定できます。
この解説では、「position: absolute」と「position: relative」を組み合わせることで、要素を親要素に対して相対的に配置する方法について説明します。
position: absolute と position: relative の違い
-
position: absolute
親要素に対して相対的に要素を配置する
- 親要素に
position: relativeを設定します。 top、right、bottom、leftプロパティを使用して、子要素の基準点からのオフセットを指定します。
例
<div id="parent">
<div id="child">
子要素
</div>
</div>
#parent {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
#child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
この例では、#child 要素は #parent 要素に対して相対的に配置されます。top: 50px と left: 50px を設定することで、#child 要素は #parent 要素の左上から 50px 離れた位置に配置されます。
応用例
- ナビゲーションバーを画面上部に固定する
- 画像を要素の中央に配置する
- モーダルウィンドウを表示する
注意点
- 親要素に
position: relativeを設定していない場合、子要素は親要素に対してではなく、body 要素に対して相対的に配置されます。 position: absoluteを設定した要素は、通常の文書フローから取り除かれるため、他の要素と重なり合う可能性があります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div id="parent">
<div id="child">
子要素
</div>
</div>
</body>
</html>
CSS
#parent {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
#child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
実行結果
このコードを実行すると、#child 要素は #parent 要素の左上から 50px 離れた位置に配置されます。
親要素に対して要素を相対的に配置する他の方法
flexbox を使用する
display: flex を親要素に設定することで、flexbox レイアウトを適用できます。flexbox レイアウトでは、子要素を柔軟に配置することができます。
<div id="parent">
<div id="child">
子要素
</div>
</div>
#parent {
display: flex;
justify-content: center;
align-items: center;
}
#child {
width: 100px;
height: 100px;
background-color: red;
}
この例では、#parent 要素に display: flex を設定することで、flexbox レイアウトを適用します。justify-content: center と align-items: center を設定することで、#child 要素を #parent 要素の中央に配置します。
grid レイアウトを使用する
<div id="parent">
<div id="child">
子要素
</div>
</div>
#parent {
display: grid;
place-items: center;
}
#child {
width: 100px;
height: 100px;
background-color: red;
}
margin プロパティを使用して、要素の周りの余白を設定することができます。
<div id="parent">
<div id="child">
子要素
</div>
</div>
#parent {
width: 200px;
height: 200px;
border: 1px solid black;
}
#child {
margin: 50px auto;
width: 100px;
height: 100px;
background-color: red;
}
この例では、#child 要素に margin: 50px auto を設定することで、#parent 要素の上下左右から 50px 離れた位置に配置します。auto を設定することで、左右の余白が自動的に調整されます。
position: sticky は、要素をスクロール時に固定するプロパティです。
<div id="parent">
<div id="child">
子要素
</div>
</div>
#parent {
height: 200px;
overflow: scroll;
}
#child {
position: sticky;
top: 0;
width: 100px;
height: 100px;
background-color: red;
}
この例では、#child 要素に position: sticky と top: 0 を設定することで、#parent 要素をスクロールしても画面上部に固定されます。
- 簡単な配置であれば、
marginプロパティを使用するのがおすすめです。 - 複雑な配置であれば、flexbox レイアウトや grid レイアウトを使用するのがおすすめです。
- 要素をスクロール時に固定したい場合は、
position: stickyを使用するのがおすすめです。
親要素に対して要素を相対的に配置するには、様々な方法があります。それぞれの方法の特徴を理解して、目的に合った方法を使用しましょう。
html css
