jquery - 使用 jQuery 定位 Canvas

Question

我正在使用 HTML5 canvas 创建一个绘图应用程序，但在定位方面遇到了问题。

我有一个动态放置 Canvas 的 div。 div 有一个顶部 div 和一个底部 div，我想将 Canvas 放在中间。现在 Canvas 与顶部 div 重叠，因此我想将其向下移动。我试过为 Canvas 设计样式(position:absolute，顶部:40)但没有任何反应。我怎样才能做到这一点？

$('<canvas/>', {
  'id': 'paint',
}).appendTo('#box');

var theCanvas = document.getElementById('paint');
theCanvas.width  = 420;
theCanvas.height = 300;

div 看起来像这样:

-----------------
     top div       
-----------------


    canvas


-----------------
    bottom div
-----------------

div 的样式:

#box {
  position: absolute;
  left:50px;
  top: 60px;  
  margin-left: auto;
  margin-right: auto;
}

.topDiv {
  position: absolute;
  top: 0;
  height: 60px;
  overflow: hidden;
}

.bottomDiv {
  position: absolute;
  bottom: 0px;
}

顶部的 div 和底部的 div 在 #box 内。

Answer 1

我已经对您要完成的确切目标做出了一些假设。根据我认为你想做的事情，我假设有一个包含两个 div 的框和一个 Canvas (并且可能在屏幕上的任何地方)，我将 html 模拟为:

<div id="box">
    <div class="topDiv">
        this is the top div
    </div>
    <div class="bottomDiv">
        this is the bottom div
    </div>
</div>

而且，我建议更改您的 javascript，以便在 bottomDiv 之前插入 Canvas 。

$('<canvas/>', {
    'id': 'paint',
}).insertBefore('#box .bottomDiv');

并更改 bottomDiv 和 topDiv 上的类样式，使它们处于 position: relative。这应该完成你正在寻找的东西。基本上 #box 控制组的位置，顶部和底部 div 在该组控件中保持固定。

这是一个带有一些边框颜色的 jsFiddle，用于显示框的位置:http://jsfiddle.net/fordlover49/HKtn5/