画布和 z 索引

Question

我有以下 HTML 代码：

<div class="reflect" style="width: 348px; height: 327px; overflow-x: hidden; overflow-y: hidden; ">
    <img id="image" class="reflected" 
         src="http://domain.com/1-1.png" 
         style="display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial;">
    <canvas width="348" height="54" 
        style="display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: -50px;"></canvas>
</div>

我希望 canvas 元素出现在 IMG 下方。现在，画布位于图像的顶部，其中 50px 部分位于顶部（请参阅 margin-top: 50px）。我尝试为每个元素设置 z-index 但没有成功。需要你的帮助来解决这个问题。

Answer 1

您需要查看元素的absolute定位和z-index

如果您绝对定位img，请设置z-index，然后然后从画布元素中删除 margin-top ，这应该可以工作。