jQuery로 캔버스 위치 지정

HTML5 캔버스로 도면 응용 프로그램을 만들고 있지만 위치 지정에 문제가 있습니다.jQuery로 캔버스 위치 지정

저는 동적으로 캔버스를 넣는 div가 있습니다. div에는 최상위 div와 하위 div가 있고 중간에 캔버스를 배치하고 싶습니다. 이제 캔버스가 최상위 div와 겹치므로 캔버스를 아래로 이동하고 싶습니다. 캔버스 스타일 (위치 : absolut, top : 40)을 시도했지만 아무 일도 일어나지 않습니다. 이것을 어떻게 할 수 있습니까?

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

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

사업부는 다음과 같습니다 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; 
}

상단 사업부 및 하단 사업부가 #box 안에 있습니다.

출처

2011-12-21 holyredbeard

다음을 포함하는 질문을 편집하십시오 : "#box"어떤 스타일 상단 사업부에 적용되는 적용되는 어떤 스타일, 아래쪽 div에 적용되는 스타일. 확인하십시오 : 상단 상자 div와 하단 상자는 #box 안에 있습니까? – dgvid

@dgvid : 좋은 생각입니다. 끝냈다! – holyredbeard

내가 정확하게 당신이 달성하려고하는지에 관한 가정의 몇했습니다 :

다음은 예입니다. 내가 생각하기에 당신이하고 싶은 생각은 두 div와 캔버스가 들어있는 상자를 가지고 있으며 (화면의 어느 곳에 나있을 수 있음), 나는 html을 다음과 같이 조롱했다 :

그리고 bottomDiv 앞에 캔버스를 삽입 할 수 있도록 자바 스크립트를 변경하는 것이 좋습니다.

$('<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

무슨 잘못을 가진 : s 또는 캔버스를 : 당신이 당신의 DIV의 스타일을하지 않는

<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

은 절대 위치 또는 음의 여백 (또는 뭔가 유사한) 기본 CSS (DIV이 HTML을 가지고 말이지 {디스플레이 : 블록; }) 할 것입니다 당신이 계신 : 그 이후

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

는 당신이 그 (것)들을 겹쳐하게 다른 코드가 있어야 위해 작동하지 않는 것 같습니다. http://jsfiddle.net/xRfPq/

출처

2011-12-21 17:54:35 powerbuoy

jQuery로 캔버스 위치 지정

답변

관련 문제