タイトルにposition: fixedと書いたが、やりたいことを実現するにあたりfixedではなくposition: stickyを使う。
fixedのまま親要素を起点に設定する方法もあるが、個人的にはこちらの方がシンプル。
<div style="position: relative; text-align: left">
<span style="position: sticky; left: 45%;">
親要素の45%あたりのところに固定される
</span>
</div>
親要素にはtext-align: left
子要素にはposition: sticky; left: 親要素からの相対位置を設定する。
position: styckyは、初期位置に影響を与えず、スクロールされたとき最終的に固定する位置を指定できるというもの。
この場合、初期位置がtext-align: leftにより左端に設定されており、スクロールされる前から最終地点よりも左側にある。
この場合position: styckyの挙動はどうなるか。
すでにスクロールされたと見なしているようで、最初から45%の位置に固定される。
すると結果的にposition: fixedと同じ挙動になり、親要素を基準に位置を指定できる実装が可能となる。