html5/css/javascript：如何在一个div中叠加两个画布

函数drawAll（）{
//上部区域，8个灰色透明按钮
让canvas0=document.getElementById（“layer0”）；
画布0.0宽=1000；
画布0.0高度=100；
让bandeau=canvas0.getContext（“2d”）；
bandeau.fillStyle=“rgba（128128,80,0.3）”；
对于（变量i=0；i<8；i++）{
班多·贝金帕斯；
带弧（50+110*i，50,45,0,2*Math.PI）；
b.填充（）；
}
//下方区域，按钮下方部分为红色矩形
让canvas1=document.getElementById（“layer1”）；
画布1.宽度=1000；
画布1.高度=1000；
让dessin=canvas1.getContext（“2d”）；
dessin.fillStyle=“红色”；
dessin.fillRect（30,50800200）；
canvas0.style.visibility=“可见”；
canvas1.style.visibility=“可见”；
}
drawAll（）

正文{
背景色：rgb（24924250）；
}
.集装箱{
位置：相对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
z指数：-10；
}
.可滚动{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：1；
}
.固定{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：2；
}

---

问题在于

没有任何高度，这使得

.container

100%的高度等于零

绝对定位的图元不会影响其父图元的高度。一旦您开始给

.container

一个实际高度，您就可以看到它的内容。在下面的示例中，我选择了宽度和高度的

100vw

和

100vh

，但由于画布的宽度为1000px，因此也可以使用该值或任何其他值

---

正常文档布局流中不再存在绝对定位的元素。相反，它位于自己的层上，与其他层分开

资料来源：

---

另一个选项是删除

溢出：隐藏从
.container
并显示它之外的所有内容


函数drawAll（）{
//上部区域，8个灰色透明按钮
让canvas0=document.getElementById（“layer0”）；
画布0.0宽=1000；
画布0.0高度=100；
让bandeau=canvas0.getContext（“2d”）；
bandeau.fillStyle=“rgba（128128,80,0.3）”；
对于（变量i=0；i<8；i++）{
班多·贝金帕斯；
带弧（50+110*i，50,45,0,2*Math.PI）；
b.填充（）；
}
//下方区域，按钮下方部分为红色矩形
让canvas1=document.getElementById（“layer1”）；
画布1.宽度=1000；
画布1.高度=1000；
让dessin=canvas1.getContext（“2d”）；
dessin.fillStyle=“红色”；
dessin.fillRect（30,50800200）；
canvas0.style.visibility=“可见”；
canvas1.style.visibility=“可见”；
}
drawAll（）
正文{
背景色：rgb（24924250）；
}
.集装箱{
位置：相对位置；
溢出：隐藏；
z指数：-10；
高度：100vh；
宽度：100vw；
}
.可滚动{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：1；
}
.固定{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：2；
}

Hi，您能检查一下您的代码片段，确保它运行正常并显示一些内容吗？谢谢。很遗憾，当运行此代码时，我在屏幕上看不到任何东西。图纸非常简单，应该显示在屏幕上。我的问题是“他们为什么不出现”我不熟悉“snipet”。虽然“draw function unknown”包含在javascript部分中，但我得到了一个错误。在js/css/html的三个框中复制/粘贴代码时，我可能遗漏了一些东西！请确保，如果我正确地组装了这三段代码，无论是在单个文件中还是在三个文件中，我都会遇到同样的问题，即无法显示画布。我编辑并修复了片段。您不需要整个HTML设置，而且最好从JS块调用JS函数。我看不到对代码段的任何修改。是因为我试图同时编辑它：我猜测（可能是错误的）“draw”函数名可以保留，并将其更改为“drawAll”。有什么地方可以学习如何使用这个“代码片段”工具吗？是的，它可以工作。我不知道这些vh和vw单位，认为“%”可以完成这项工作。显然不是。非常感谢。@JiPe38酷，很高兴我能帮上忙。如果您能点击左侧的复选标记，将我的答案标记为“已接受”，我将不胜感激。