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

Question

我正在使用此代码 http://cssdeck.com/labs/pa0yqlki，它显示 canvas 覆盖浏览器 window 的大小。

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

我无法做的是在 canvas 之后添加内容。一旦 canvas 结束，window 也结束，我想说 <h1>。所以当页面加载时应该会出现一个滚动条我应该能够滚动多一点以便我看到 <h1>。

有什么想法吗？

Answer 1

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

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

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

这是我的 HTML 的一部分。 "myText"会根据window的大小显示在canvas的下方。

为了实现这一点，我在 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;
  }
}

玩左、右、上、下以获得准确的位置。

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

HTML content after (under) canvas element

html

javascript

css

position

canvas