如何将div覆盖在画布CSS上 [英] How to overlay a div over a canvas CSS

问题描述

我正在尝试在HTML5中将div放在画布上(作为一种HUD).我正在使用 z-index ，它不起作用.如何使用任何CSS来实现这一目标?

I'm trying to place a div over a canvas in HTML5 (as a HUD of sorts). I'm using z-index, it's not working. How can I achieve this using any CSS?

    .HUD {
        z-index:100;
    }

    canvas {
        z-index: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 .

We wrap the canvas and div in a container element, which is position: relative. Then the canvas and div are set to position: absolute.

这篇关于如何将div覆盖在画布CSS上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！