見出し画像

【CSS】position: absoluteでtopもleftもなにも設定しなかったら、position: relativeを設定した要素の、top:0; left: 0;のとこに位置することになるの?🤔

はい。CSSの`position: absolute;`を使った要素は、もし`top`、`right`、`bottom`、`left`のいずれの位置も指定されていない場合、その配置の基点となる最も近い位置指定された(`position: relative;`、`position: absolute;`、`position: fixed;`、または`position: sticky;`が設定されている)祖先要素に対して、`top: 0;` と `left: 0;` の位置に配置されます。これは、実質的にその祖先要素の左上隅に要素を配置することを意味します。

ただし、そのような位置指定された祖先要素がない場合、絶対位置指定された要素はHTML文書の`<body>`要素に対して相対的に配置されます。この場合も、特に位置が指定されていなければ、`body`要素の左上隅に配置されることになります。

`position: relative;`で指定された要素は、元々のフローの位置を基点として、`top`、`right`、`bottom`、`left`プロパティによって指定されたオフセットに応じて移動します。この要素自体が`position: absolute;`で配置された子要素の基点となる場合、その子要素はこの相対位置指定された要素の左上隅からの位置に基づいて配置されます(もちろん、子要素に追加の位置指定がなければです)。

(最後の行が難しい感じだけど、ニュアンスはなんか分かった気がするな。🫠 ちなみに、position: relativeを設定しなかった場合のは、すでに記事にしてますッ!😄)

 それでは、お読みいただきありがとうございましたッ!

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

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

よろしくお願いしますッ!