使 div 始终位于始终写入内容的画布之上答案

【问题标题】：Making a div always on top of a canvas that always write something使 div 始终位于始终写入内容的画布之上
【发布时间】：2013-01-14 10:47:09
【问题描述】：

我正在使用kinetic.js 在我的画布中不断地绘制一些线条，并且我希望在此画布上显示一个 div 文本。使用 relative 和 absolute 技巧，我可以在画布中间放置一个 div，但问题是当我不断绘制线条时，这些线条被绘制在我不想发生的 div 文本之上！

基本模板：

    <div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
        greatTexts
   </div>

   <div id="container" style="position: relative; width: 100%; height: 100%;">
   <canvas></canvas> 
   </div>

【问题讨论】：

标签： javascript html html5-canvas kineticjs

【解决方案1】：

我相信您也可以在#container 和#div-text 上设置一个z-index 值。像这样：

<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;z-index:999;">
        greatTexts
   </div>

  <div id="container" style="position: relative; width: 100%; height: 100%;z-index:990;">
     <canvas id="myCanvas" height="500" width="500"></canvas> 
   </div>

This 显示了一个示例。

【讨论】：

【解决方案2】：

默认情况下为空的画布，表示您可以看到其背后的元素。

由于您将<div> 之前放置在<canvas> 之前，因此在代码中，<div> 呈现在下 <canvas>。

解决方案？稍微切换 div：

<div>
    <canvas style="position:absolute; width:100%; height:100%; background:red"></canvas> 
    <div id="div-text" style="background-color:#00baba; position:absolute; margin-top:50%; margin-left:50%;">
        greatTexts
    </div>
</div>

【讨论】：

实际上kinetic.js 正在以编程方式编写canvas，所以我没有太多的选择来写 div 向上或向下！ :S 如果我在kinetic.js 创建canvas 之后使用javascript 创建这个div 会有帮助吗？我怎么知道它是否已经创建！ :S

【解决方案3】：

像这样将带有文本的 div 放在容器 div 之后

   <div id="container" style="position: relative; width: 100%; height: 100%;">

   <div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
        greatTexts
   </div>

无需创建画布元素，因为正如您所提到的，KineticJS 会自动为您创建这些元素。

【讨论】：