function drawAll() {
// Upper zone, 8 grey transparent buttons
let canvas0 = document.getElementById("layer0");
canvas0.width = 1000;
canvas0.height = 100;
let bandeau = canvas0.getContext("2d");
bandeau.fillStyle = "rgba(128,128,80,0.3)";
for (var i = 0; i < 8; i++) {
bandeau.beginPath;
bandeau.arc(50 + 110 * i, 50, 45, 0, 2 * Math.PI);
bandeau.fill();
}
// Lower zone, a red rectangle partially under the buttons
let canvas1 = document.getElementById("layer1");
canvas1.width = 1000;
canvas1.height = 1000;
let dessin = canvas1.getContext("2d");
dessin.fillStyle = "red";
dessin.fillRect(30, 50, 800, 200);
canvas0.style.visibility = "visible";
canvas1.style.visibility = "visible";
}
drawAll() body {
background-color: rgb(249, 249, 250);
}
.container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -10;
}
.scrollable {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
你好
我被困在兩個畫布的疊加問題上。這是一個簡化的例子。請注意，在實際應用中，按鈕和繪圖要復雜得多，我想保留 html5 / css / javascript 的結構。
我想我錯過了 css 中的一些東西，成功地將這兩個畫布疊加在一起，按鈕部分覆蓋了紅色矩形，但是什麼？
如果有人可以提供幫助，謝謝。
回答
問題是
沒有任何高度，這使得 .container 100% 的高度 同樣為零。絕對定位的元素不會影響其父元素的高度。一旦你開始提供 .container 一個實際的高度，你可以看到它的內容。在下面的示例中，我選擇了 100vw 和 100vh 對於寬度和高度，但由於您的畫布是 1000 像素寬，您也可以使用該值或任何其他值。
正常文檔佈局流程中不再存在絕對定位的元素。相反，它位於自己的層上，與其他所有內容分開。
來源：MDN 網絡文檔
另一種選擇是刪除 overflow: hidden; 來自 .container 並顯示它之外的所有內容。
function drawAll() {
// Upper zone, 8 grey transparent buttons
let canvas0 = document.getElementById("layer0");
canvas0.width = 1000;
canvas0.height = 100;
let bandeau = canvas0.getContext("2d");
bandeau.fillStyle = "rgba(128,128,80,0.3)";
for (var i = 0; i < 8; i++) {
bandeau.beginPath;
bandeau.arc(50 + 110 * i, 50, 45, 0, 2 * Math.PI);
bandeau.fill();
}
// Lower zone, a red rectangle partially under the buttons
let canvas1 = document.getElementById("layer1");
canvas1.width = 1000;
canvas1.height = 1000;
let dessin = canvas1.getContext("2d");
dessin.fillStyle = "red";
dessin.fillRect(30, 50, 800, 200);
canvas0.style.visibility = "visible";
canvas1.style.visibility = "visible";
}
drawAll() body {
background-color: rgb(249, 249, 250);
}
.container {
position: relative;
overflow: hidden;
z-index: -10;
height: 100vh;
width: 100vw;
}
.scrollable {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
《碧蓝航线驱逐图鉴大全——攻略介绍》 掌握关键舰船信息
斯里蘭卡