position:relative; を書かなくてもボタンが正しく表示されるのはなぜですか?

Swiper の CSS にて、.swiper にはあらかじめ position: relative; がついているからです。
2024年11月28日
ユーザー

動画の 0:42 あたりで「そして、もう my-carousel の領域を基準にはしなくなったので、こちらの position: relative; は不要ですね、削ってしまいましょう」とあります。

この際に、my-button-prevmy-button-nextposition=absolute のままなので、my-button-○○ の親要素である .swiperposition: relative; がないとボタンの配置がおかしくなるのではないかと思いました。

しかし、実際に試したところ .swiperposition: relative; を書かなくてもボタンは正しく表示されました(書いても正しく表示される)。

子要素で position: absolute; を使う場合、親要素に position: relative; がないと意図しない描画がされる気がするのですが、私の理解に誤りがあるでしょうか。

(参考にした動画)
#09 positionプロパティの挙動を理解しよう
1:21あたり「ただそれに加えて、この要素を囲む要素に position: static 以外の値、大抵は position: relative を使うのですが、これら両方を指定するとこちらの要素を基準に配置することができて、こちらの方がよく使われます。 」

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(1)