How to position divs on top of canvas
I have the following html:

    <body>
    	<input id="slider" type="range" min="0" max="100" step="1"></input>
    	<div id="backward"></div>
    	<canvas id="canvas" width="800" height="500" style="border: 1px solid;"></canvas>
    	<div id="forward"></div>
    </body>

and the following css:

    #canvas{
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	z-index: 50;
    }
    
    #button{
    	position: absolute;
    	left: 200 px;
    	top: 10px;
    	z-index: 100;
    }

What other css do I need to position the backward div inside the left of the canvas element and the forward div inside the right of the canvas element?


How to position divs on top of canvas
===

I have the following html:

    <body>
    	<input id="slider" type="range" min="0" max="100" step="1"></input>
    	<div id="backward"></div>
    	<canvas id="canvas" width="800" height="500" style="border: 1px solid;"></canvas>
    	<div id="forward"></div>
    </body>

and the following css:

    #canvas{
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	z-index: 50;
    }
    
    #button{
    	position: absolute;
    	left: 200 px;
    	top: 10px;
    	z-index: 100;
    }

What other css do I need to position the backward div inside the left of the canvas element and the forward div inside the right of the canvas element?

