캔버스 zindex 문제

Question

직물 js api를 사용하고 있습니다. 페이지에는 두 개의 캔버스가 있습니다. 둘 다 표시하면 모두 좋다. 그러나 한 번에 하나만 표시하고 싶습니다. 그래서, 표시 영역이 동일하도록 절대 위치를 사용하고 있습니다. 내가 직면 한 문제는 첫 번째 캔버스가로드되고 두 번째 캔버스가로드되면 어떻게 든로드 된 캔버스의 Z- 인덱스가 더 높다는 것입니다. 왜냐하면 두 번째 캔버스에 배치 된 요소를 선택할 수 없기 때문입니다.

Answer 1

당신은 몇 가지 다른 방법으로 캔버스의 CSS z-index 값을 정의 중 하나를 HTML - 태그에 인라인 스타일에 의해 또는 스타일 시트를 통해 할 수 있습니다 -하지만 CSS z-index 값 만 position 값 곳으로 요소 작업 값이 static으로 설정되지 않았습니다. 직접적으로 서로의 상단에 HTML 페이지 요소를 레이어링하면

그것은 ... 예를 들어 컨테이너 요소 내부의 장소를, 때로는 유용 자식 요소에서 z-index 값을 상속을 염두에

<div id="canvas-container"> 
    <canvas id="canvas1"></canvas> 
    <canvas id="canvas2"></canvas> 
</div> 

베어링 자신의 그들은 명시 적 선언을 필요로하므로 부모는,이 배열은

#canvas-container { 
    position:relative; 
    z-index:100; 
} 
/* canvas position */ 
#canvas1, #canvas2 { 
    position:absolute; 
    top:0; 
    left:0; 
} 
/* canvas z-index */ 
#canvas1 { 
    z-index:200; 
} 
#canvas2 { 
    z-index:300; 
} 

이 같은 #canvas2 아래 #canvas1 배치됩니다 ... 그래서 같은 스타일 항목이있는 스타일이 될 수 있습니다 z-index 값이 겹치는 요소는 더 높은 값을 갖는 요소 아래에 정렬됩니다. 세 가지 요소의

CSS의 너비와 높이 값도 ... 페이지 레이아웃을 유지하는 데 도움이 동일한 값으로 설정할 수 있습니다

#canvas-container, #canvas1, #canvas2 { 
    width:???px; 
    height:???px; 
} 

유사 CSS 속성 및 값은 HTML - 태그에 추가 할 수 있습니다 the html style attribute 또는 added dynamically via JavaScript으로 직접

참조 : MDN article on CSS z-index.