Q&A
位置指定をしたい要素の親要素に position:relative を指定し、位置指定したい要素に position: absolute を指定し、top, left, bottom rightなどで位置を指定する。
とありますが、なぜ親要素にrelativeを指定しなければいけないのでしょうか？
ご教示のほどお願いします????♂️
回答2件
0
なぜ親要素にrelativeを指定しなければいけないのでしょうか？
指定しなくても構いません。位置の基準がその外側のposition: relativeなどになっている要素（なければいちばん外側の<html>）になるだけです。
投稿2020/06/06 14:44
総合スコア145208
0
abusolute は親要素の位置を基準に子要素の配置を決めるためですね。
基準となる親要素の左上からの位置を指定するので、基準となる親要素が relative だと便利なのです。
relative の親要素が縦横100pxの正方形、abusolute の子要素が50pxの正方形としましょう。このとき子要素の指定が top:0; left:0; なら親要素の左上にきます。
親要素に relative を指定しない場合、 position の初期値は static です。 static は位置指定無効状態で、ブラウザトップの左上が始点になります。このとき abusolute の子要素はブラウザの左上です。
上記の例だと全く見た目はかわりません。ところが親要素が６００pxほどスクロールした位置にあるなら、 relative のときは子は親の左上、 static が親だとあいかわらずブラウザトップに鎮座します。
実際のサイトは閲覧環境によってブラウザトップからの要素の位置は変わります。たいていはどこかでem,rem,%などの相対単位を使いますし、ユーザ側でテキストサイズ変えたり...そうなるとabusolute の子要素をブラウザトップから決めていくのは現実的とは言い難いです。１行折り返しが増えただけでもうボタンの位置がおかしくなります。
relative の場合は、親と子の位置関係に注意すればいいだけです。隣接する要素で高さが変わっても影響はありません。
そもそも fixed がビューポートに対する絶対指定なのであまり使わないですが、ｆｉｘｅｄ などを親にしてもabusolute にできますよ。
投稿2020/06/06 15:41
総合スコア140
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。