CSS 親を起点としてposition:fixedを指定場所にかけたい

前提・実現したいこと

親を起点としてposition:fixedをかけたいです
赤色のボックスの右上に青色のボックス(right:10%,top:10%の位置)を表示してたいですが、
親から出てしまいます
position:fixedはbody要素が起点となるとの情報がありましたが不可能なんでしょうか
不可能であればスクロールで追尾するfixedに値する代替え案があれば教えてください

該当のソースコード

<style>
body,html{
height:100%;
margin:0;
}
</style>

<div style="position:relative;width:30%;height:30%;background:red;overflow-y:scroll;overflow-x: scroll;-webkit-overflow-scrolling: touch;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="position: fixed;right:10%;top:10%;width:50%;height:50%;background:blue">
</div>
</div>

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

回答2件

ベストアンサー

親要素にtransform: translate(0,0)などを追加する、という方法があります。

サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/qs6af25L/

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

1.transform または perspective の値が none 以外である

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

投稿2021/08/02 02:20

Lhankor_Mhy

総合スコア36158

position:sticky;を使ってはどうでしょうか。
要素の順序を変えています。細かい部分は調整ください。

html
1<div style="position:relative;width:30%;height:30%;background:red;overflow-y:scroll;overflow-x:scroll;-webkit-overflow-scrolling:touch;">
2	<div style="position:sticky;top:10%;width:50%;height:50%;margin-left:auto;margin-right:10%;background:blue"></div>
3	<div>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br></div>
4</div>