Armbie Armbie - 3 months ago 10
CSS Question

How can I align HTML text over the corners of a canvas?

I am trying to create on overlay on top of a canvas. I cannot get the left or right hand elements to align inside the corners of the canvas while the top and bottom ones seem to work. I suspect that if I centered the canvas that the left overlays would align with the page and not the canvas. I'm leaving messing with the canvas position until I sort out the overlays.

Fiddle 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

As your overlay text's position themselves relative to their parent and the parent is your container div, you need to give your container same width as the canvas.

Update

On request, moved the canvas width/height to the css, set it to 100% and set the wanted width/height on the container.

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