Question

我想在HTML5 画布中制作一个动画，然后用CSS将2个画布叠加在另一个上面：

＆＃13;

#viewport {
  position: relative;
}
#viewport canvas {
  position: absolute;
}
#canvas1 {
  border-color: #000000;
  border-style: groove;
  z-index: -1;
}
#canvas2 {
  background: #112233;
}

＆＃13;

<div id="viewport">
  <canvas id="canvas1" width="500" height="200"></canvas>
  <canvas id="canvas2" width="500" height="200"></canvas>
</div>

<input type="text">
<input type="button" value="go">

＆＃13;

这是JSFIDDLE：http://jsfiddle.net/thodoris12/spy1tbhu/1/

问题是文字字段和按钮被我不想要的画布所覆盖。任何解决方案？

Answer 1

在视口div上设置高度或下边距。例如：

#viewport {
    position: relative;
    height:220px;
}

或

#viewport {
    position: relative;
    padding-bottom:220px;
}

<强> jsFiddle example

由于视口的内容是绝对定位的，因此视口div基本上会折叠，就好像它没有内容一样。通过设置高度或底部填充，您可以完成您所追求的目标。

当位置是绝对的时，按钮被Canvas覆盖

1 个答案: