スクロールしても絶対位置の要素を動かなくさせるには

https://codepen.io/ypppp/full/xxaZGxr

html
1<html>
2  <head>
3    <meta charset="utf-8">
4    <style>
5      .main {
6        width: 500px;
7        height: 500px;
8        overflow-x: scroll;
9        position: relative;
10        border: 1px solid black;
11      }
12      .contents {
13        width: 1500px;
14        height: 50px;
15      }
16      .button {
17        position: absolute;
18        bottom: 10px;
19        right: 10px;
20        height: 30px;
21        width: 50px;
22        background-color: red;
23        user-select: none;
24        cursor: pointer;
25      }
26    </style>
27  </head>
28  <body>
29    <div class="main">
30      <div class="contents"></div>
31      <div class="button">ボタン</div>
32    </div>
33    <script>
34      document.getElementsByClassName("contents")[0].innerText = "コンテンツ".repeat(100);
35    </script>
36  </body>
37</html>

main要素の中のボタンは、絶対位置でmain要素の右下に配置しています。
しかし、右にスクロールすると、絶対位置で配置したボタンが何故か左に動いてしまいます。
これをスクロールしてもしなくても常に右下に配置するにはどうすればよいのでしょうか？できればcss内で完結させたいです。

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

回答2件

bottom、right相当はtopとleftをcalcすれば指定できますよね？

css
1<style>
2.main {
3width: 500px;
4height: 500px;
5  overflow-x: scroll;
6position: relative;
7border: 1px solid black;
8}
9.sub {
10width: 300px;
11height: 200px;
12  overflow-x: scroll;
13position: relative;
14border: 1px solid black;
15}
16.contents {
17width: 1500px;
18height: 50px;
19}
20.button {
21top: calc(100% - 40px);
22left: calc(100% - 60px);
23height: 30px;
24width: 50px;
25  background-color: red;
26  user-select: none;
27cursor: pointer;
28position: sticky;
29}
30</style>
31<div class="main">
32<div class="contents"></div>
33<div class="button">ボタン</div>
34</div>
35<div class="sub">
36<div class="contents"></div>
37<div class="button">ボタン</div>
38</div>
39<script>
40document.querySelectorAll(".contents").forEach(x=>x.innerText = "コンテンツ".repeat(100));
41</script>

投稿2023/02/20 10:38

yambejp

総合スコア114839

ypp

2023/02/20 10:49

ありがとうございます。期待通りに動作することを確認しました。しかしながら、根本的な解決方法を提示していただいたhetena19さんをベストアンサーにさせていただきます。すいません。

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

ベストアンサー

position: sticky; を使えばどうでしょう。

css
1.button {
2  position: sticky;
3  top: 150px;
4  left: 440px;
5  height: 30px;
6  width: 50px;
7  background-color: red;
8  user-select: none;
9  cursor: pointer;
10}