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

Question

我正尝试在画布上创建叠加层。我无法让左手或右手元素在画布的角落内部对齐，而顶部和底部的元素似乎可以工作。我怀疑如果我将画布左对齐的页面与页面对齐而不是画布。我要离开画布的位置，直到我清理覆盖物。

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

.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; 
 
}

<div class="canvasAndOverlayWrapper container" style="position: relative"> 
 

 
    <canvas class="myCanvas" width="300" height="200">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>

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>