javascript - How to layer elements with CSS position property? -

i've looked @ questions on here asking same thing , tried every suggestion, none of working me.

i want layer 2 dynamically created canvas elements on top of each other, inside div id of "plotplaceholder".

it continues show 1 below other, so:

// grab elements form  var wid = document.getelementbyid("wid").value;  var hei = document.getelementbyid("hei").value;    // grab div container , 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);

canvas {      border: 2px solid #27a3ea;      position: absolute;      top: 0;      left: 0;  }    #plotplaceholder {      position: relative;  }

<div id="plotplaceholder"></div>

i found out happening - there div being created (parent of canvas elements) class of 'canvas-container'. position property being overwritten.

.canvas-container {     position: absolute !important;     top: 0;     left: 0; } 

that !important fixed it, although i'm sure it's not best practice in circumstances.