Canvas zindex问题

Question

我正在使用fabric js api。页面上有两个画布。如果我同时显示它们，那么一切都很好。但是，我希望一次只显示一个。所以，我使用绝对位置，以便显示区域相同。我面临的问题是，当第一个画布已加载，并且我加载第二个画布时，不知何故，第一个加载画布的z-index更高。因为，我无法选择放在第二个画布上的元素。

Answer 1

您可以通过几种不同的方式定义画布的CSS z-index值，可以通过HTML标记中的内联样式或通过样式表来定义 - 但CSS z-index值仅适用于元素具有position值且该值未设置为static的位置。

将HTML页面元素直接叠加在一起时，将它们放在容器元素中有时很有用，例如......

<div id="canvas-container">
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
</div>

请记住，子元素从父元素继承z-index值，因此它们需要显式声明，这种排列可以是样式表条目的样式，如此...

#canvas-container {
    position:relative;
    z-index:100;
}
/* canvas position */
#canvas1, #canvas2 {
    position:absolute;
    top:0;
    left:0;
}
/* canvas z-index */
#canvas1 {
    z-index:200;
}
#canvas2 {
    z-index:300;
}

这会将#canvas1放在#canvas2下方，因为具有较低z-index值的重叠元素会排列在具有较高值的​​元素下方。

所有三个元素的CSS宽度和高度值也可以设置为相同的值，以帮助维护页面布局......

#canvas-container, #canvas1, #canvas2 {
    width:???px;
    height:???px;
}

可以使用the html style attribute或added dynamically via JavaScript直接将类似的CSS属性和值添加到HTML标记中。

另见：MDN article on CSS z-index。