Positionプロパティ

Question

五つの異なる位置の値があります。

static
relative
fixed
absolute
sticky

これらの中で
static

フォルトで理解できます。

https://gyazo.com/a31a2ebcdedeca8fa4893c9e88bd948a

fixed

https://gyazo.com/25dbdea5e9455708a053bf0d29916f89

これが最初になっていたのですが、bottomとrightを10にしたら、下記
のようになりました。

https://gyazo.com/4c163d330093868e9a05101145df5391

fixedに関してなぜ、このような違いが出てくるのでしょうか

relativeとabsolute

https://gyazo.com/92eb2e977bc3e9be6938edb2ee3b2904

https://gyazo.com/05861363ac6ff5f202fc114613caac21

なぜ、このような違いがでてくるのでしょうか

stickyに関しては割愛させてください。まだ理解できません。

Answer 1

fixedの違いは「単位」がないからです。relativeとabsolute等含めて、リンク先を見てもらった方が、違いを理解しやすいかと思います。

CSSのpositionを総まとめ！absoluteやfixedの使い方は？