Austin Slominski Austin Slominski - 6 months ago 37
CSS Question

Positioning text over a canvas in a responsive div

This question has been asked and answered in portions, but I can't seem to find an answer in full. I have a responsive div in bootstrap, and I (1) want my canvas to display with the same position and dimensions, and (2) want my text to appear above the canvas.

<div class="col-md-9 content-wrapper>
<canvas id="canvas" resize="true"></canvas>
<p class="statement">Display this text over canvas</p>
</div>


css:

.statement{
position:relative;
top:50%;
transform: translateY(-50%);
}

#canvas{
width:100%; height:100%;
}


Any advice? I know I'll need some sort of position css on the canvas, but I don't know what, and absolute positioning will give me problems with it's responsiveness. I'd also like to stay away from extra javascript for positioning, but if someone could explain a way that won't make it buggy, I'd be open to the suggestion.

Thanks!

Answer

You place

position: relative;

On the background div.

Place

Position: absolute;

On the foreground div and position with top, bottom, left, right. The foreground container will work relative to the background, meaning it is responsive, if you set the width of the foreground using %