如何使用CSS position属性对元素进行分层？

Question

我已经看过这里的所有问题，问同样的事情，并尝试了所有的建议，但没有一个对我有用。

我想将两个动态创建的画布元素叠加在一起，在div内部，其id为“plotPlaceholder”。

它继续只显示一个在另一个之下，如下：

// 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);

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

#plotPlaceholder {
    position: relative;
}

<div id="plotPlaceholder"></div>

Answer 1

我发现了发生了什么 - 有一个额外的div（画布元素的父级）和一个'canvas-container'类。位置属性被覆盖。

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

!important确定了它，但我确信在大多数情况下这不是最佳做法。