title: How to position divs on top of canvas
body: <p>I have the following html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;input id="slider" type="range" min="0" max="100" step="1"&gt;&lt;/input&gt;
      &lt;div id="backward" class="button"&gt;&lt;/div&gt;
      &lt;canvas id="canvas" width="800" height="500" style="border: 1px solid;"&gt;&lt;/canvas&gt;
      &lt;div id="forward" class="button"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the following css:</p>
  
  <pre><code>#canvas{
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 50;
  }
  
  .button{
      position: absolute;
      top: 10px;
      z-index: 100;
  }
  </code></pre>
  
  <p>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?</p>