見出し画像

【CSS】position: absoluteって、postion: relativeを設定しなかったら、どうなるの？🤔

gorojy

`position: absolute;`を使用すると、要素は通常のドキュメントのフローから外れ、最も近い位置指定された（`position`プロパティが`static`以外に設定されている）祖先要素に対して相対的に配置されます。もし`position: absolute;`を設定した要素が、`position: relative;`、`position: absolute;`、または`position: fixed;`のいずれかで位置指定された祖先要素を持たない場合、その要素はHTMLドキュメントの`<html>`要素（ルート要素）に対して相対的に配置されます。

つまり、もし`position: absolute;`を設定した要素の親要素やその他の祖先要素に`position: relative;`やその他の位置指定がされていない場合、その絶対位置指定された要素はページ全体のレイアウトに基づいて配置されます。これにより、意図しない位置に要素が表示されることがあり、ページのレイアウトが予期しない形になる可能性があります。

一般的に、`position: absolute;`を使う場合は、その要素を相対的に配置したいコンテナに`position: relative;`を設定するのが一般的なベストプラクティスです。これにより、絶対位置指定された要素はそのコンテナ内での相対的な位置に基づいて配置され、より予測可能で管理しやすいレイアウトを実現できます。

例えば、以下のように設定することで、`.container`内の`.box`要素を右上隅に配置できます：

<div class="container">
  <div class="box">絶対位置指定されたボックス</div>
</div>
.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.box {
  position: absolute;
  top: 0;
  right: 0;
}

この場合、`.box`は`.container`の右上隅に配置されます。もし`.container`に`position: relative;`が設定されていなければ、`.box`はページ全体（`<html>`要素）に対して右上隅に配置されることになります。

（へえ～、<html>`要素に対してになるんだ～。実際に試したっすけど、へえ～、なるほど～。おもしれ～。😀）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

いいなと思ったら応援しよう！

gorojy
よろしくお願いしますッ！