安排畫布層

Question

<div id="wrapper"> 
    <div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;"> 
     <FORM><INPUT TYPE="button" onClick="history.go(0)" VALUE="Restart!"></FORM> 
    </div> 

    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px;"> 
     <canvas width="400" height="500" class="codehs-editor-canvas"></canvas> 
    </div> 
</div> 

爲什麼不是在畫布頂部的按鈕請幫忙，我已經嘗試重新排列代碼，但總是帆布在上面。請幫助:)

Answer 1

http://jsfiddle.net/InferOn/264Ty/

從MDN reference

援引的z-index CSS屬性指定的元素及其後代 的Z順序。當元素重疊時，z順序決定哪一個 覆蓋另一個。具有較大z-索引的元素通常覆蓋較低元素的 元素。

<div id="wrapper"> 
    <div style="position: absolute;z-index: 2; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;"> 
     <FORM><INPUT TYPE="button" onClick="history.go(0)" VALUE="Restart!"></FORM> 
    </div> 

    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px;"> 
     <canvas width="400" height="500" class="codehs-editor-canvas"></canvas> 
    </div> 
</div>