css - 如何在 Canvas CSS 上叠加一个 div

Question

我试图在 HTML5 中的 Canvas 上放置一个 div(作为某种 HUD)。我正在使用 z-index，它不工作。我如何使用任何 CSS 实现此目的？

    .HUD {
        z-index:100;
    }

    canvas {
        z-index:1;
    }

Answer 1

试试这个:

#container {
  position: relative;
}
#container canvas, #overlay {
  position: absolute;
}
canvas {
  border: 1px solid black;
}

<div id="container">
  <canvas></canvas>
  <div id="overlay">This div is over the canvas</div>
</div>

我们将 canvas 和 div 包裹在一个容器元素中，即 position: relative。然后将 canvas 和 div 设置为 position: absolute。