jQueryでキャンバスを配置する

Question

HTML5キャンバスで描画アプリケーションを作成していますが、配置に問題があります。

私は動的にキャンバスを置くdivを持っています。 divにはtop divとbottom divがあり、キャンバスを中央に配置したいと考えています。キャンバスが上のdivと重なっているので、下に移動したいと思います。私はキャンバスをスタイリングしようとしましたが（position：absolut、top：40）、何も起こりません。どうすればこれを達成できますか？

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

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

div要素は次のようになります。divのための

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


    canvas 


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

私はあなたが達成しようとしている正確に何をするような仮定のカップルを作りました。あなたが何をしたいと思うかに基づいて、私は、2つのdivとキャンバスが入っているボックスを持ち、スクリーンのどこにでも潜むことができると仮定して、私はhtmlを次のように嘲笑しています：

そして、JavaScriptを変更してbottomDivの前にキャンバスを挿入することをお勧めします。

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

そして彼らはposition: relativeになるようbottomDivとtopDiv上のクラスのスタイルを変更します。これは、あなたが探しているものを達成するはずです。基本的に#boxはグループの位置を制御し、上部と下部のdivはそのコントロールのグループに固定されたままにします。

は、ここでのボックスがどこにあるかを示すために、いくつかの境界線の色でjsFiddleです：http://jsfiddle.net/fordlover49/HKtn5/

Answer 2

CSSプロパティーposition: relativeを#boxに適用するだけでよい場合がありますが、詳細を確認するのは難しいです。

Answer 3

いただきましたが間違ってます。■またはキャンバス：

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

Answer 4

あなたのdivのスタイルなければESは、絶対位置または負のマージン（または類似したもの）を持っているために、このHTMLデフォルトのCSS（DIV {ディスプレイ付き：ブロック;それは彼らが重なっになり、他のコードが存在しなければならないあなたのために動作していないようですので

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

：}）あなたは後にしているだけで何を行います。ここで

は例です：http://jsfiddle.net/xRfPq/