安排画布层

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>