Question

我遇到的问题是我的javascript背景超越了所有内容并且没有显示任何html元素。我希望它能让我的按钮和数字显示在背景前面。

示例：

    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

尝试添加

＆＃13;

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

＆＃13;

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.

启动秒表不起作用的功能

2 个答案: