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

Question

我想在 HTML5 canvas 中制作动画，我用 CSS 将 2 个 Canvas 叠加在另一个之上:

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

<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">

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

问题是文本字段和按钮被我不想要的 Canvas 覆盖了。 有什么解决办法吗？

Answer 1

在视口(viewport) div 上设置高度或底部边距。例如:

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

或

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

jsFiddle example

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