秒錶不起作用的啓動功能

Question

我遇到問題，因爲我的javascript背景超過了所有內容，並且沒有顯示任何html元素。我希望它能讓我的按鈕和數字顯示在背景前面。

實施例：

Code

window.onload = function() { 
    var paper = new Raphael(200, 200, 600, 600); 
    var backGround = paper.rect(0, 0, 600, 600); 
    backGround.attr({ 
    fill: "#ffb366" 
    }); 
} 

    <div class= "bot"> 
<input type="button" value="Start" onclick="start();"/> 
    <span id="timers">0</span> 
    </div> 

Answer 1

嘗試添加

.bot { 
 
    position: relative; 
 
    z-index: 1; 
 
    top: 200px; 
 
    left: 200px; 
 
}

Answer 2

Instead of putting your timer button inside bot class you can create a separate div and style it with the required margins. The html code looks like below: 
     <div class= "bot"> 
     </div> 
     <div style="top:200px;left:200px;z-index:10;position:absolute;"> 
     <input type="button" value="Start" onclick="start();" 
    style="z-index:10"/> 
     <span id="timers">0</span> 
     </div> 

Here is the required CSS:- 
.bot { 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    z-index:1; 
} 

    And try to write the javascript as below:- 
     window.onload = function() { 
     var element=document.getElementsByClassName('bot')[0]; 
     var paper = new Raphael(element, 600, 600); 
     var backGround = paper.rect(0, 0, 600, 600); 
     backGround.attr({ 
     fill: "#ffb366" 

     }); 
    } 

    It looks like, z-index property does not work if the button is inside raphael class. Good luck.