position: sticky; で左右が効かない

前提・実現したいこと

追従メニューを作ろうとしています。
jQueryなどを使わずに、position: sticky; で簡単に実装できると思いました。

発生している問題

ところが、position: sticky; で左右が効かないので困っています。(上下は効いています)
ぐぐると、単純にleftやrightが記述されているものがあり、下記のサンプルコードを書きました。
一部、position: sticky; では左右が効かないという内容のページもあったと思うのですが、色々ぐぐっているうちに見失い、どこに行ったかわからなくなりました。
何が足りないのか教えて下さい。

該当のソースコード

html
1<body>
2    <div style="width: 2000px; height: 1000px; background-color: lightyellow;">
3        <div style="position: sticky; top: 0; right: 0; background-color: yellow; width: 100px;">
4            追従メニュー
5        </div>
6        dummy
7    </div>
8</body>

試したこと

念の為、別のブラウザFirefoxでも開いてみましたが、同じ挙動です。

補足情報（FW/ツールのバージョンなど）

macOS Mojave 10.14.6
Brackets リリース 1.14 ビルド 1.14.2-17770 (release-1.14.2 f71f00acc)
Google Chrome バージョン: 99.0.4844.51（Official Build）（x86_64）
Firefox 97.0.1 (64 ビット)

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<body style="width: 821px;">
2    <div style="width: 2000px; height: 1000px; background-color: lightyellow;">
3        <div style="position: sticky; top: 0; right: 0; background-color: yellow; width: 100px;">
4            追従メニュー
5        </div>
6        dummy
7    </div>
8</body>