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

Question

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

我想在 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 元素的父元素)，其中包含一个类“canvas-container”。 position 属性被覆盖。

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

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