javascript - 使用 insertAdjacentHTML 时如何给出固定的元素位置

Question

我正在使用document.body.insertAdjacentHTML. 一旦我这样做，元素就会弹出但位于页面的最顶部，该方法只有 4 个不同的位置可供选择，所以我想知道如何更改元素的位置或至少如何使用position: fixed它导致它现在不工作。

document.body.insertAdjacentHTML('afterbegin', `<canvas id="canvas" 
                  style=
                  "
                  border-radius:10px;
                  width:600px;
                  height:300px;
                  position:fixed;
                  top:100px;
                  text-align:center;
                  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                  ">
                  </canvas>`);