So I have a canvas and I want to place an html Element over that canvas using css. I want the button to stay in place in the canvas when you resize the whole entire page and currently I have this code.

/

#button {position:absolute; top:40%; left:30%;}

So I have a canvas and I want to place an html Element over that canvas using css. I want the button to stay in place in the canvas when you resize the whole entire page and currently I have this code.

https://jsfiddle/z4fhrhLc/

#button {position:absolute; top:40%; left:30%;}

• javascript
• html
• css

• 2 Possible duplicate of Relatively position an element without it taking up space in document flow – Spencer Wieczorek Commented May 12, 2017 at 18:58
• Referencing the duplicate mentioned, place your button and canvas in a container then used the approaches mentioned to relatively position it on-top of the canvas without it taking up space in the Document (you may want to define z-index for each one to ensure the button is on top). – Spencer Wieczorek Commented May 12, 2017 at 19:05

2 Answers 2

You can achieve this by using an additional container for both canvas and button. Here is how it would work

.canvas-container{
  position: relative;
  width: 500px;
  height: 500px;
}
#canvas {
  position: absolute;
  background-color:lightgrey
}
#button {
  position:absolute;
  left:30%;
  top:40%
}

<div class="canvas-container">
 <canvas id='canvas' width='500px' height='500px'></canvas>
<button id='button'>Whats up</button> 
</div>  

You have to set canvas-container's width and height to same as canvas height and width otherwise button position will change.

try changing the #canvas to position: relative;