我正在尝试构建一个包含两个 Canvas 的 HTML 页面，一个是背景，另一个是位于背景顶部的 Logo 。我将它们放在一个 部分 中，并在正文后面附加了另一个包含其他 HTML 内容的 部分，但下一部分附加在 HTML 页面的顶部，而不是前面的部分部分。
代码如下:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,body,canvas{
margin: 0;
padding: 0;
overflow-x: hidden;
}
</style>
</head>
<body>
<section style="position:relative;">
<canvas id="bg" style="position:absolute;background-color:black;"></canvas>
<canvas id="logo" style="position:absolute;background-color:blue;"></canvas>
</section>
<section style="position:absolute;color:white;">
some text
</section>
</body>
</html>
一些文本 出现在页面顶部，并且独立于其部分的 position 属性。
请帮助。
最佳答案
当您将某物设置为 position:absolute 时，它会变得有点“分离”并且可以四处移动，所以它的父级变得像空的，所以它会折叠到没有高度。
将背景保持在 position:relative 中，以便为该部分提供高度。
section {
position: relative;
}
#bg {
width: 150px;
height: 150px;
background: #008000;
}
#logo {
position: absolute;
width: 100px;
height: 100px;
top: 25px;
left: 25px;
background: #00f;
}<section>
<canvas id="bg"></canvas>
<canvas id="logo"></canvas>
</section>
<section>
some text
</section>关于javascript - 如何在包含多个 Canvas 的部分之后添加一个部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43026387/