如何在画布的角上对齐HTML文本？

Question

我正在尝试在画布上创建叠加层。我不能让左手或右手元素在画布的角落内对齐，而顶部和底部的元素似乎都有效。我怀疑如果我将画布集中在一起，左边的叠加层将与页面对齐而不是画布。我要离开画布位置，直到我整理叠加层。

小提琴http://jsfiddle.net/8cj3nv3w/

   function reset(){
   clock.multiplier = 1.0;
   var primitives = scene.primitives.removeAll();
   viewer.dataSources.removeAll();
   viewer.entities.removeAll();
   };

.container {
  position: relative;
}
.myCanvas {
  position: relative;
  border: 1px solid #404040;
}
.overlay {
  background-color: transparent;
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.overlayTopLeft {
  left: 10px;
  top: 10px;
}
.overlayTopRight {
  right: 10px;
  top: 10px;
}
.overlayBottomRight {
  right: 10px;
  bottom: 10px;
}
.overlayBottomLeft {
  left: 10px;
  bottom: 10px;
}

Answer 1

由于您的叠加文本的位置相对于其父级而父级是您的容器div，因此您需要为容器提供与画布相同的宽度。

<强>更新

根据要求，将画布宽度/高度移动到css，将其设置为100％并在容器上设置所需的宽度/高度。

.container {
    position: relative;
    width: 300px;
    height: 200px;
}
.myCanvas {
    position: relative;
    border:1px solid #404040;
    width: 100%;
    height: 100%;
}
.overlay {
    background-color: transparent;
    position: absolute;
    z-index: 10;
    pointer-events: none;
}
.overlayTopLeft {
    left: 10px;
    top: 10px;
}
.overlayTopRight {
    right: 10px;
    top: 10px;
}
.overlayBottomRight {
    right: 10px;
    bottom: 10px;
}
.overlayBottomLeft {
    left: 10px;
    bottom: 10px;
}

<div class="canvasAndOverlayWrapper container" style="position: relative">
    
    <canvas class="myCanvas">Canvas is not supported</canvas>
    
    <div class="overlay overlayTopLeft">
        <div>top left</div>
    </div>
    
    <div class="overlay overlayTopRight">
        <div>top right</div>
    </div>
    
    <div class="overlay overlayBottomLeft">
        <div>bottom left</div>
    </div>
    
    <div class="overlay overlayBottomRight">
        bottom right
    </div>
</div>