我正在尝试构建一个包含两个画布的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
属性保持独立。
请帮助。
答案 0 :(得分:1)
当您将某些内容设置为position:absolute
时,它会变得类似于&#34;已脱离&#34;并且可以四处走动,所以它的父母变得空虚,所以它会坍塌到没有高度。
将背景保持在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;
}
&#13;
<section>
<canvas id="bg"></canvas>
<canvas id="logo"></canvas>
</section>
<section>
some text
</section>
&#13;