1

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.net/z4fhrhLc/

#button {position:absolute; top:40%; left:30%;}
CarlosIsLazy
  • 165
  • 1
  • 2
  • 10
  • 2
    Possible duplicate of [Relatively position an element without it taking up space in document flow](http://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space-in-document-flow) – Spencer Wieczorek May 12 '17 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 May 12 '17 at 19:05

2 Answers2

8

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.

azs06
  • 3,467
  • 2
  • 21
  • 26
3

try changing the #canvas to position: relative;

James Clarke
  • 21
  • 8