【週刊ドットインストール】 256timesのクラスを準備中、Ruby/Ruby on Railsのロードマップページを追加
動画の 0:42 あたりで「そして、もう my-carousel の領域を基準にはしなくなったので、こちらの position: relative; は不要ですね、削ってしまいましょう」とあります。
my-carousel
position: relative;
この際に、my-button-prev と my-button-next が position=absolute のままなので、my-button-○○ の親要素である .swiper に position: relative; がないとボタンの配置がおかしくなるのではないかと思いました。
my-button-prev
my-button-next
position=absolute
my-button-○○
.swiper
しかし、実際に試したところ .swiper に position: relative; を書かなくてもボタンは正しく表示されました(書いても正しく表示される)。
子要素で position: absolute; を使う場合、親要素に position: relative; がないと意図しない描画がされる気がするのですが、私の理解に誤りがあるでしょうか。
position: absolute;
(参考にした動画) #09 positionプロパティの挙動を理解しよう 1:21あたり「ただそれに加えて、この要素を囲む要素に position: static 以外の値、大抵は position: relative を使うのですが、これら両方を指定するとこちらの要素を基準に配置することができて、こちらの方がよく使われます。 」
position: static
position: relative
ドットインストールは、3分動画でマスターできるプログラミング学習サービスです。
3分で気軽に学習でき、スマートフォンからも視聴可能です。ホームページやWebサービスの制作を通して、実践的にプログラミングを学べます。
他にも、ゲーム制作やデータ分析・機械学習・AIに使われる言語まで幅広くカバー。学びたい分野のレッスンがきっと見つかります。
この回答を見るにはプレミアムプランへの登録が必要です
動画の 0:42 あたりで「そして、もう
my-carouselの領域を基準にはしなくなったので、こちらのposition: relative;は不要ですね、削ってしまいましょう」とあります。この際に、
my-button-prevとmy-button-nextがposition=absoluteのままなので、my-button-○○の親要素である.swiperにposition: relative;がないとボタンの配置がおかしくなるのではないかと思いました。しかし、実際に試したところ
.swiperにposition: relative;を書かなくてもボタンは正しく表示されました(書いても正しく表示される)。子要素で
position: absolute;を使う場合、親要素にposition: relative;がないと意図しない描画がされる気がするのですが、私の理解に誤りがあるでしょうか。(参考にした動画)
#09 positionプロパティの挙動を理解しよう
1:21あたり「ただそれに加えて、この要素を囲む要素に
position: static以外の値、大抵はposition: relativeを使うのですが、これら両方を指定するとこちらの要素を基準に配置することができて、こちらの方がよく使われます。 」