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，然后从canvas元素中删除margin-top，这应该可以。

画布和z-index

1 个答案: