如何对 CSS 位置 属性 的元素进行分层？

Question

我查看了这里提出的所有问题，并尝试了所有建议，none 对我有用。

我想在 div 内将两个动态创建的 canvas 元素叠加在一起，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 元素的父元素），class 为 'canvas-container'。位置 属性 正在被覆盖。

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

!important 修复了它，尽管我确信在大多数情况下这不是最佳做法。