title: How do I get these canvases to align properly?
body: <p>I am trying to display the three canvases over one another, but they just display beside each other. I have very little experience with css. What do I need to add?</p>
  <pre><code>&lt;body&gt;
  &lt;div id=&quot;canvas_container&quot;&gt;
  &lt;canvas id=&quot;Background&quot; width=&quot;330&quot; height=&quot;330&quot;&gt;&lt;/canvas&gt;
  &lt;canvas id=&quot;mycanvas&quot; width=&quot;330&quot; height=&quot;330&quot;&gt;&lt;/canvas&gt;
  &lt;canvas id=&quot;Overlay&quot; width=&quot;330&quot; height=&quot;330&quot;&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  .canvas_container {
    position: relative;
  }
  
  .container &gt; canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
  &lt;/style&gt;
  
  &lt;div id=&quot;codeinput&quot;&gt;
  &lt;br&gt;
  The &quot;X&quot; goes here:&lt;input type=&quot;text&quot; id=&quot;shapeX&quot;&gt;
  
  &lt;br&gt;
  The &quot;Y&quot; goes here:&lt;input type=&quot;text&quot; id=&quot;shapeY&quot;&gt;
  
  &lt;br&gt;
  Choose the color: &lt;input type=&quot;text&quot; id=&quot;shapeColor&quot; value=&quot;green&quot;&gt;
  
  
  &lt;script&gt;
  unrelated javascript
  &lt;/script&gt;
  
  &lt;br&gt;
  &lt;button onclick=makeSquare();&gt;Draw shape&lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  </code></pre>