Question

我创建了一个简单的网站如下：
website
当我在提示中输入任何文本并单击“确定”时，一个球将被放入第一个框，即进入Past Thoughts框。这是代码：

HTML

<h1>
  Welcome to zen module
</h1>
<p id="demo">
</p>
<div id="divn">
  <canvas id="myCanvas" width="100" height="300" style="transform: inherit; margin: 30px;">
  </canvas>
</div>
<div class="fixed-size-square" onclick="popup();">
  <span>
    Past Thoughts
  </span>
</div>
<div class="size-square" onclick="popup();">
  <span>
    Present Thoughts
  </span>
</div>
<div class="square" onclick="popup();">
  <span>
    Future Thoughts
  </span>
</div>
<button>
  I've no thoughts
</button>

的JavaScript

var context;
var dx = 4;
var dy = 4;
var y = 25;
var x = 10;
var counter = 0;

function draw() {
    context = myCanvas.getContext('2d');
    context.clearRect(0, 0, 400, 400);
    context.beginPath();
    context.fillStyle = "red";
    context.arc(x, y, 10, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    if (x < 0 || x > 100) dx = -dx;
    if (y < 0 || y > 200) dy = 0;
    //x+=dx;
    y += dy;
}

function popup() {
    var thought = prompt("Please enter your thought");
    if (thought !== null) {

        setInterval(draw, 10);
    } else window.alert("You should enter a thought");
}

CSS

.fixed-size-square {
    display: table;
    background: green;
}
.fixed-size-square span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.size-square {
    display: table;
    background: green;
}
.size-square span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.square {
    display: table;
    background: green;
}
.square span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.fixed-size-square, .size-square, .square {
    float: left;
    margin: 20px;
    zoom: 1;
    position: relative;
    top: -291px;
    width: 150px;
    height: 150px;
    /*box-shadow: 10px 10px 5px #888888;*/
    /*position: absolute;*/
    /*margin: auto;*/
}
button {
    position: relative;
    margin: 0px auto;
}
/*.myCanvas {
    z-index: 0px;
}*/
 #divn {
    margin: 0px auto;
}

问题是：当球落下时，球会留在盒子后面。它在框中不可见。怎么修好？

Fiddle

Answer 1

您可以在opacity: 0.5;

上使用.fixed-size-square, .size-square, .square

DEMO

编辑：这是一个带有优化CSS的DEMO。

Answer 2

position:relative;z-index:10000px;可以做到这一点，但会破坏你现在的布局。我建议这样的事情：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function popup (n) {
            var context;
            var dx= 4;  
            var dy=4;
            var y=25;
        var elWidth=150;
        var ballWidth=10;
            var x=(elWidth+ballWidth)/2;
            var counter = 0;
        var myCanvas=document.getElementById('myCanvas'+n);
            function draw(){
                context= myCanvas.getContext('2d');
                context.clearRect(0,0,200,235);
                context.beginPath();
                context.fillStyle="red";
                context.arc(x,y,10,0,Math.PI*2,true);
                context.closePath();
                context.fill();
        if(y>200){clearInterval(interval);}
                if( y<0 || y>200)dy=0;
                y+=dy;
        myCanvas.className='active';
            }


            var interval=setInterval(draw,10);
    }
</script>
<style>
html,body{margin:0;}

div.time {
    display: table;
    background: green;
    float: left;
    margin: 20px;
    zoom: 1; 
    position: relative;
    top: 75px;
    left:35px;
    width: 150px;
    height: 150px;
}

span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


canvas{
    z-index:10000;
    transform: inherit;
    float: left;
    margin: 20px;
    zoom: 1; 
    position: relative;
    top: -200px;
    left:35px;
    margin:20px;
}
#myCanvas1{clear:left;}
</style>
</head>
<body>
<div class="time"><span>Past Thoughts</span></div>
<div class="time"><span>Present Thoughts</span></div>
<div class="time"><span>Future Thoughts</span></div>
<canvas id="myCanvas1" width="150" height="235" onclick="popup(1)"></canvas>
<canvas id="myCanvas2" width="150" height="235" onclick="popup(2)"></canvas>
<canvas id="myCanvas3" width="150" height="235" onclick="popup(3)"></canvas>
</body>
</html>

http://fiddle.jshell.net/uvrkgrqs/show/

Answer 3

在html上有一个z-index属性来设置哪些层。

球不落入盒子（javascript）

3 个答案: