Question

我正在尝试构建一个包含两个画布的HTML页面，一个是背景，另一个是位于背景顶部的徽标。我将它们放在部分中，并在主体上附加了包含其他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>

some text显示在页面顶部，并且与其部分的position属性保持独立。

请帮助。

Answer 1

当您将某些内容设置为position:absolute时，它会变得类似于＆＃34;已脱离＆＃34;并且可以四处走动，所以它的父母变得空虚，所以它会坍塌到没有高度。

将背景保持在position:relative，以便为该部分提供高度。

＆＃13;

section {
  position: relative;
}

#bg {
  width: 150px;
  height: 150px;
  background: #008000;
}
#logo {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 25px;
  left: 25px;
  background: #00f;
}

＆＃13;

<section>
    <canvas id="bg"></canvas>
    <canvas id="logo"></canvas>
</section>

<section>
    some text
</section>

＆＃13;

如何在包含多个画布的节之后添加节？

1 个答案: