How to layer elements with CSS position property?
<p>I've looked at all the questions on here asking the same thing and tried every suggestion, none of it is working for me.</p>

<p>I want to layer two dynamically created canvas elements on top of each other, inside the div with an id of "plotPlaceholder".</p>

<p>It continues to just show one below the other, like so:</p>

<p><img src="https://i.stack.imgur.com/ze02V.png" alt="enter image description here"></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// grab elements from form
var wid = document.getElementById("wid").value;
var hei = document.getElementById("hei").value;

// grab div container and create canvas elements
var canvasPlaceholder = document.getElementById("plotPlaceholder");
var baseCanvas = document.createElement("canvas");
var canvasElement = document.createElement("canvas");

canvasElement.width = wid;
canvasElement.height = hei;
baseCanvas.width = wid;
baseCanvas.height = hei;
baseCanvas.style.zIndex = "1";
canvasElement.style.zIndex = "2";
    
baseCanvas.id = "canvasToHoldGrid";
canvasElement.id = "plottingCanvas";
canvasPlaceholder.appendChild(baseCanvas);
canvasPlaceholder.appendChild(canvasElement);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 2px solid #27a3ea;
    position: absolute;
    top: 0;
    left: 0;
}

#plotPlaceholder {
    position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="plotPlaceholder"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>