定位帆布與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

回答

相關問題