CODEWITHSUNDEEP
javascripthtmlcsscanvas
Ritik Saxena
Ritik Saxena

Reputation: 724

How to add a section after a section containing multiple canvasses?

I'm trying to build a HTML page which contains two canvasses, one is the background, other is the logo positioned on top of background. I placed them inside a section and appended the body with another section which contains other HTML content, but the next section is appended at the top of the HTML page instead of the preceding section.

Here is the code:

<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 appears on top of page, and stays independent of position property of its section.

Please Help.

Upvotes: 0

Views: 31

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26400

When you set something to position:absolute, it gets kind of "detached" and can move around, so its parent becomes like empty, so it collapses to no height.

Keep the background in position:relative, so it gives a height to the section.

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>

Upvotes: 1

Related Questions