CSSのpositionについて質問です

positionの指定によって画像が表示されたり表示されなかったり表示されるものの回転しなかったり、それぞれの理由がわからないので教えていただきたいです。

JavaScriptで画像が弧を描くという内容です。

javascript

const character = document.querySelector('.character'); let degree = 0; loop(); function loop() { const rotation = (degree * Math.PI) / 180; const targetX = window.innerWidth / 2 + 100 * Math.cos(rotation) - 50; const targetY = window.innerHeight / 2 + 100 * Math.sin(rotation) - 50; character.style.left = `${targetX}px`; character.style.top = `${targetY}px`; degree += 1; requestAnimationFrame(loop); }

css

.character { background-image: url('../image/character.png'); background-size: 100px 100px; width: 100px; height: 100px; position:absolute; top: 0; left: 0;}

このとき、css の position の行を削除すると画像が表示されるものの回転しません。プロパティを absolute にしても relativeにしても全く同じように表示されます。absolute は絶対位置で relative は相対位置だったと思うのですがなぜどちらも同じ位置になるのかがわかりません。

1）position が static の場合に画像が表示されるものの弧を描かない理由はなんでしょうか？
2）position が absolute, relative のそれぞれで全く同じ位置に表示されるのはなぜでしょうか？

アドバイスよろしくお願いいたします。