title: Overlay a canvas over a div
body: <p>I have a div and I want to overlay a canvas exactly on top of it with the same width, height, padding and margins. Although I am using position: absolute like most questions here recommend and z-index the canvas is still showing underneath the div. This is the code I have until now.</p>
  
  <pre><code>&lt;div id ="editor-section"&gt;  
       &lt;div class="editable" id="editor"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  
  // the canvas is created / removed dynamically on connection / disconection 
  hub.client.broadcastSomeoneConnected = function (connectionId, someoneConnected) 
  {
      if (someoneConnected) {
          var canvas = document.createElement("canvas");
          canvas.id = connectionId;
          canvas.className = 'canvases';
          canvas.style.border = '2px solid red';
          canvas.style.zIndex = zindex;  
          zindex++;
  
          var parentDiv = document.getElementById("editor-section");
          parentDiv.appendChild(canvas);
  
      } else { // someone disconnected
  
          var canvas = document.getElementById(connectionId);
          canvas.parentNode.removeChild(canvas);
      }
   }
  
   // css for all canvases
   .canvases {
       width:60%; 
       height:700px;
       border:1px solid;
       position:absolute;
       padding: 5%;
       margin-left:20px;
       pointer-events: none;
   }
  
   // css for editor div
   #editor {
       padding: 5%;
       margin-left:20px;
       border: 2px solid black;
       overflow-y:scroll;
       height: "700px";
       width: "100%";
       background-color: white;
       margin-bottom:30px;
   }
  </code></pre>
  
  <p>PS: zindex is initialized globally because I need multiple canvases layered on top of each other and the editor eventually depending on the number of people connected </p>
  
  <p>What am I doing wrong here? Thanks</p>