定位帆布与jQuery

我创建与HTML5画布的绘图应用程序，但具有定位问题。定位帆布与jQuery

我有一个div，我把动态的画布。该div有一个顶部div和一个底部div，我想将画布放在中间。现在，画布与顶部div重叠，因此我想将它向下移动。我已经试过造型画布（位置：绝对，顶：40），但没有任何反应。我怎样才能做到这一点？

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

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

股利如下：

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

顶格和底格里面#box。

来源

2011-12-21 holyredbeard

请编辑您的问题，包括以下内容：应用什么样式“#box”，什么样式应用于顶部DIV，什么样式适用于底部div。请同时确认：#box里面是顶部div和底部div吗？ – dgvid 2011-12-21 17:48:52

@dgvid：好主意。完成了！ – holyredbeard 2011-12-21 18:05:45

我已经做了几个假设，究竟你要完成的任务。基于我认为你想要做的事情，我假设有一个包含两个div和一个画布（可能在屏幕上的任何地方）的盒子，我嘲笑html为：

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

而且，让你的bottomDiv之前插入你的画布，我建议改变你的JavaScript。

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

而且使他们position: relative改变对bottomDiv和topDiv类的造型。这应该可以完成你正在寻找的东西。基本上#box控制组的位置，顶部和底部的div保持固定在该组控件中。

这里有一个的jsfiddle一些边框颜色显示在箱子是：http://jsfiddle.net/fordlover49/HKtn5/

来源

2011-12-21 19:48:48 PriorityMark

您可能只需要CSS属性position: relative适用于#box，但没有更多的细节，这是难以肯定。

来源

2011-12-21 17:50:47 dgvid

哪些错误有：

<style> 
#top{Height:40px; } 
#bottom{Height:40px;} 

</style> 

<script> 
    var theCanvas = document.getElementById('paint'); 
    theCanvas.width = 420; 
    theCanvas.height = 300; 
</script> 

<div id='top'></div> 
<div id='paint'></div> 
<div id='bottom'><//div>

来源

2011-12-21 17:51:59

除非你的风格你的DIV：S或帆布：ES拥有绝对定位或负利润（或类似的东西）这个HTML默认的CSS（DIV {显示：块; }）将这样做你以后：

<div>Top</div> 
<canvas></canvas> 
<div>Bottom</div>

因为这似乎并不为你工作还必须有其他的代码，使他们重叠。

下面是一个例子：http://jsfiddle.net/xRfPq/

来源

2011-12-21 17:54:35 powerbuoy

定位帆布与jQuery

回答

相关问题