position:relativeとposition:fixedは組み合わせられないんですか？

タイトルのとおりです
下記ソースだとposition:relativeの起点なりません
position:relativeを起点にしつつ、
position:fixedで追尾する形にするにはどうしたらいいのでしょうか？

css
1
2<style>
3body,html{
4height:100%;
5}
6</style>
7
8<div style="position:relative;width:50%;height:50%;overflow-y:scroll;-webkit-overflow-scrolling: touch">
9test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
10<div style="width:5%;height:5%;position:fixed;bottom:10%;right:20%">追尾</div>
11</div>

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

回答3件

position: stickyというものもありますが、そちらはどうでしょうか？

投稿2020/12/09 22:52

maisumakun

総合スコア145975

退会済みユーザー

2020/12/09 23:14

回答ありがとうございます position:stickyにしたところ、top、bottom、right、leftなど無効になってしまったのですが、指定できないのでしょうか？ <div style="position:relative;width:50%;height:50%;overflow-y:scroll;-webkit-overflow-scrolling: touch"> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test <div style="width:5%;height:5%;position:sticky;bottom:10%;right:20%">追尾</div> <div style="width:5%;height:5%;position:sticky;top:10%;right:20%">追尾</div> </div>

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

ベストアンサー

ご希望のことは下記のような感じでしょうか。

html
1<div class="boxp">
2  <div class="box1">追尾1</div>  
3  <div>
4    test<br>test<br>test<br>test<br>test<br>
5    test<br>test<br>test<br>test<br>test<br>
6    test<br>test<br>test<br>test<br>test<br>
7    test<br>test<br>test<br>test<br>test<br>
8    test<br>test<br>test<br>test<br>test<br>
9    test<br>test<br>test<br>test<br>test<br>
10    test<br>test<br>test<br>test<br>test<br>
11    test<br>test
12  </div>
13  <div class="box2">追尾2</div>
14</div>

css
1body,html{
2height:100%;
3}
4.boxp {
5  position:relative;
6  width:50%;
7  height:50%;
8  overflow-y:scroll;
9  -webkit-overflow-scrolling: touch;
10}
11.box1 {
12  width: 10%;
13  height: 5%;
14  position: sticky;
15  top: 10%;
16  left: 80%;
17}
18.box2 {
19  width: 10%;
20  height: 5%;
21  position: sticky;
22  bottom: 10%;
23  left: 80%;
24}

right が効かないので left にしてみたら効きました。理由はよく分かりません。

追記

下記でご希望のレイアウトになりませんか。

html
1<div class="container">
2  <div class="box-top">追尾1</div>  
3  <div class="box-content">
4    test<br>test<br>test<br>test<br>test<br>
5    test<br>test<br>test<br>test<br>test<br>
6    test<br>test<br>test<br>test<br>test<br>
7    test<br>test<br>test<br>test<br>test<br>
8    test<br>test<br>test<br>test<br>test<br>
9    test<br>test<br>test<br>test<br>test<br>
10    test<br>test<br>test<br>test<br>test<br>
11    test<br>test
12  </div>
13  <div class="box-bottom">追尾2</div>
14</div>

css
1body,html{
2height:100%;
3}
4.container {
5  position:relative;
6  width:50%;
7  height:50%;
8}
9.box-content {
10  height:100%;
11  overflow-y:scroll;
12  -webkit-overflow-scrolling: touch;
13}
14.box-top {
15  width: 10%;
16  height: 5%;
17  position: absolute;
18  top: 10%;
19  right: 20%;
20}
21.box-bottom {
22  width: 10%;
23  height: 5%;
24  position: absolute;
25  bottom: 10%;
26  right: 20%;
27}