如何在画布 CSS 上覆盖 div答案

【问题标题】：How to overlay a div over a canvas CSS如何在画布 CSS 上覆盖 div
【发布时间】：2015-01-03 18:32:48
【问题描述】：

我正在尝试在 HTML5 中的画布上放置一个 div（作为一种 HUD）。我正在使用z-index，它不起作用。如何使用任何 CSS 来实现这一点？

    .HUD {
        z-index:100;
    }

    canvas {
        z-index:1;
    }

【问题讨论】：

position: relative 或 position: absolute?

标签： css html html5-canvas

【解决方案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。

【讨论】：

这是一个很好的答案...但是...当我有一个很大的<div> 时，无论 z-index、背景颜色或背景如何，画布元素都会直接通过 div -图像？
我知道这是一个老话题，但也许有人遇到了我的问题。使用 soktinpk 的代码，我的 div 位于画布的右侧，当我调整窗口大小时，覆盖画布。我用下一部分代码解决了这个问题：

。我在画布之前移动了我的 div，我的 css 是 .coord{position: absolute;边距：0 自动；}

【解决方案2】：

试试这样的

<div class="container_div" style="position:relative;">
    <div class="hover_div" style="position:absolute; width:25px !important; display:block;z-index:9999">                            
        <img class="some_class" src="/settings_icon.png" style="height: 20px; display: block;">
    </div>
<canvas width="180" height="270" style="width: 180px; height: 270px;"></canvas>
</div>

【讨论】：