帆布的z-index

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

如果定位img絕對，設置的z-index，然後從canvas元素刪除margin-top你需要看看absolute元素：放置和z-index

，這應該工作。