我的 HTML 项目的分层混乱

Question

我正在烧瓶中制作一个应用程序，我试图让画布占据屏幕的全部可用宽度，然后将我的菜单项放在不同的层上，以便仍然可以访问。 （顺便说一句，我正在使用引导程序）

分层真正实现我想要的效果的唯一一次是当我将画布的 z-index 设置为 -1 时，但随后我无法与其交互。我也尝试过更改项目的相对位置，但它们仍然相互干扰。

这是生成的 HTML

document.addEventListener("DOMContentLoaded", function() {
  const canvas = document.getElementById('mainCanvas');
  const ctx = canvas.getContext('2d');

  let isPainting = false;
  let lineWidth = 5;

  function canvasResize() {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth
  }

  canvas.addEventListener('mousedown', (e) => {
    isPainting = true;
    ctx.lineWidth = 1;
  });

  canvas.addEventListener('mouseup', () => {
    isPainting = false;
    ctx.stroke();
    ctx.beginPath();
  });

  canvas.addEventListener('mousemove', (e) => {
    if (!isPainting) {
      return

    }
    ctx.lineCap = 'round';
    ctx.strokeStyle = "black";
    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop)
  });
  window.addEventListener("resize", canvasResize())
})

.collapse-horizontal.show {
  display: flex !important;
}

.collapse-horizontal.show>.container-fluid {
  flex: 1;
  overflow: auto;
}

#menuItems {
  position: absolute;
  z-index: 100;
}

#menuContent {
  background-color: white;
}

canvas {
  background-color: rgb(134, 180, 47);
  position: absolute;
  z-index: 1;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<main class="text-center mt-3 d-flex justify-content-center align-items-center px-0" style="height: 100%; overflow-y: hidden">



  <div class="menuItems" style="height: 100vh;" id="menuContent">
    <div class="collapse collapse-horizontal menuItems" id="menu">
      <div class="container-fluid menuItems" style="width: 350px;">
        Content that takes up 100% of the available height
      </div>
    </div>
  </div>

  <div class="menuItems container-fluid d-flex justify-content-start align-items-start" style="height: 100vh">
    <button class="btn btn-secondary mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-expanded="false" aria-controls="collapseExample">
            <i class="bi bi-sliders" style="font-size: 2rem"></i>
        </button>
  </div>
  <canvas id="mainCanvas" height="1008" width="1434"></canvas>
</main>

Answer 1

您可以通过更大的 z-index 值将按钮显示在与画布相同的容器中，并显示在画布顶部：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.rect(0, 0, 1500, 1000);
ctx.fillStyle = "red";
ctx.fill();

#myCanvas {
    width: 1500px;
    height: 1000px;
}

.canvas-container{
  position: relative;
  width: 500px;
  height: 500px;
}
#myCanvas {
  position: absolute;
  background-color:lightgrey
}
input {
  position:absolute;
  z-index: 30;
}

<div class="canvas-container">
    <input type="button" value="foo" onclick="alert('foo')" style="left: 0; top: 0;">
    <input type="button" value="bar" onclick="alert('bar')" style="left: 40px; top: 0;">
    <canvas id="myCanvas" onclick="alert('canvas')"></canvas>
</div>