如何在畫布的角落對齊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>