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>

排列画布层

1 个答案: