1

我不断在我的画布中绘制一些线条，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>
4

3 回答 3

2

我相信你也可以同时设置和的z-index值。像这样：#container#div-text

<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>

这显示了一个例子。

于 2013-01-30T15:14:35.447 回答
0

默认情况下为空的画布，这意味着您可以看到其背后的元素。

由于您<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>
于 2013-01-30T15:09:40.267 回答
0

只需像这样将带有文本的 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 会自动为您创建这些元素。

于 2013-02-06T04:15:17.897 回答