あなたの場合、sticky
の代わりに position:fixed;
を使用する方がよいと思います。 「ボタン」を畫面の右端に配置するには、right: 0;
を設(shè)定する必要があることに注意してください。あるいは、right: 20px;
を設(shè)定し、margin 屬性を削除することもできます。
「余分な空白」が存在するのは、sticky
が使用される場合、要素がドキュメントの通常のフロー內(nèi)に配置されるためです。これは、position:relative;
を使用し、top: -20px
を設(shè)定するのと似ています。要素は 20 ピクセル上に移動(dòng)しますが、元のスペースはドキュメント フロー內(nèi)に「殘る」ため保持されます。 position:fixed;
を使用すると、要素がドキュメント フローから削除されます。
CSS でのドキュメント フローと配置について読むことをお?jiǎng)幛幛筏蓼?