如何更改此javascript动画在我的网站上的位置？

当我将此代码集成到我的网站中时，它会被放置在页面底部的所有其他项下。我已经尝试过改变css和html，但不明白为什么它会这样做。我想把它放在我的网站标题。javascript中是否有导致这种情况的代码？有人能想出发生这种情况的原因吗？谢谢：）

html

这一行：

document.body.appendChild(renderer.domElement);

这就是将画布附加到DOM中的内容，您可以将其存储在引用中并修改其位置

const animation = document.body.appendChild(renderer.domElement);
animation.css({
  'position': 'absolute',
  'top': 50,
  'left': 130,
});

或者只需将画布附加到任意位置即可

document.getElementById('MyContainer').appendChild(renderer.domElement);

编辑：

---

ThreeJS与WebGL配合使用，它非常沉重，会影响您的网站性能，如果您只想在google中搜索.gif的sea动画，那么它的效果会更好

为什么您希望它出现在标题中？你有机会吗？我希望它是在标题与文字覆盖它，动画是有美学。我的问题是：当javascript动画嵌入到我的网页时，会被推到页面的底部。尽管多次尝试通过css/html代码更改来更改位置，但它仍然保持不变。我想要实现的是：我的网站以“海洋”为主题，动画位于我的网站标志后面，具有美学价值。它将被放置在导航栏下方的“横幅”中。抱歉，如果我仍然有X-Y问题，我是这个网站的新手，我会检查你的代码，尝试应用它并从中学习，谢谢！我更喜欢mp4视频循环，但是这个动画质量非常高，我找不到任何类似的高质量视频。也许可以从这个动画中提取一个可循环的mp4视频？

const animation = document.body.appendChild(renderer.domElement);
animation.css({
  'position': 'absolute',
  'top': 50,
  'left': 130,
});

document.getElementById('MyContainer').appendChild(renderer.domElement);