在（下）canvas元素之后的HTML内容

Question

我正在使用这个代码http://cssdeck.com/labs/pa0yqlki，它显示一个覆盖浏览器窗口大小的画布。

我能够在画布上显示内容（通过使用绝对定位和z-index：-1）

我无法做的是在画布后添加内容。一旦画布结束，窗口也是如此，我希望有一个<h1>让我们说。所以当页面加载时应该出现一个滚动条我应该能够滚动一点以便我看到<h1>。

有任何想法吗？

Answer 1

好的，感谢markE's回复，我能够实现我想要的。

[...] <canvas> </canvas>

<h1 id="myText"> Text </h1> [...]

这是我的HTML的一部分。 “myText”将根据窗口大小显示在画布下。

为此，我在CSS中添加了以下代码。

#myText
{
  padding-top: 100vh;
}

Answer 2

你可以通过玩CSS位置来达到这个目的;

尝试这样的事情：

<div>
  <canvas width="300" height="200" class="custom-canvas" />
  <div class="text">
    <div class="main">20 %</div>
    <div class="head">Completed</div>
  </div>
</div>

SCSS：

.custom-canvas{
  position: relative;
  clear: both;
  width: 450px;
  height: 200px;
}
.custom-canvas {
  .text {
    bottom: 13px;
    position: absolute;
    left: 6px;
    right: 0;
    text-align: center;
  }
  .head {
    margin-top: 14px;
  }
}

使用左，右，上，下游戏来达到准确的位置。