CSS スクロールで追従しないボタン

Question

実現したいこと

スクロールに追従しないボタンの作成

発生している問題・分からないこと

divでクラスを設定し、position:fixed;で固定しても追従してきます。原因はありますか？

該当のソースコード

.fixed-btn{
position:fixed;
top:150px;
right:500px;
}

・・・
<div class="fixed-btn" ></div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

チャットGPTに聞いた結果を入力してもむりだったのでわからないです。

補足

特になし

Comments

[int32_t]

現状の質問文にあるHTMLとスタイルシートだけだど問題が再現しないと思います。問題を再現できるコードを開示してください。

Answer 1

transformプロパティなどがある祖先要素があり、包含ブロックが生成されている、というのが一番ありそうな感じがします。

position プロパティが absolute または fixed の場合、包含ブロックは以下の条件を持った直近の祖先要素におけるパディングボックスの辺によって構成されることがあります。

transform または perspective の値が none 以外である
will-change の値が transform または perspective である
filter の値が none 以外、または will-change の値が filter の場合 (Firefox のみで動作)。
contain の値が paint の場合 (例 contain: paint;)

レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN

ページレイアウト内に要素のための空間が作成されません。要素は最初の包含ブロック（視覚メディア要素の場合はビューポート）から相対的に配置されます。
position - CSS: カスケーディングスタイルシート | MDN