是否可以在相对定位的画布上相对定位元素？

Question

这是我的问题：

我有一个canvas元素，我使用JavaScript在documentElement中居中。它具有相对位置，因此它仍然可以与其上方和下方的p元件良好地流动。我想在画布上放置另一个p元素。现在我这样做：

var element=document.getElementById("my_canvas_element");

while(element.parentElement){
    offset_x+=element.offsetLeft;
    offset_y+=element.offsetTop;
    element=element.parentElement;
}

my_p_element.style.left=offset_x+"px";
my_p_element.style.top=offset_y+"px";

只要我将my_p_element的CSS位置设置为绝对值，这将准确地将my_p_element定位在canvas元素的左上角。有没有办法只使用CSS将my_p_element放在相对定位的画布元素的左上角？

也就是说，有没有办法只使用CSS将p元素放在相对定位的画布的左上角？

谢谢！

Answer 1

如何使用该div将画布和段落元素包装在div中 位置：相对于

然后你可以根据需要定位：绝对画布和段落相对于父div。

＆＃13;

＆＃13;

body{ background-color: ivory; padding:0px;}
#wrapper{position:relative; border:1px solid blue; width:300px; height:300px; }
#p1{position:absolute; top:-15px; border:1px solid green;}
#canvas{position:absolute; border:1px solid red;}

＆＃13;

<div id=wrapper>
  <p id=p1>I'm a top-left paragraph element</p>
  <canvas id="canvas" width=300 height=300></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;