부트 스트랩 캔버스 Z- 인덱스 문제

나는이 미친 문제는, 우리는 부트 스트랩 마이그레이션이부트 스트랩 캔버스 Z- 인덱스 문제

내 자바 스크립트 코드는 이미지 위에 2 캔버스를 만들고 DIV에 삽입; 마우스 오버 (파란색) 및 클릭 (빨간색) 캔버스에 그립니다.

일부 코드 :

<div id="map_container"> 
<canvas id="myCanvas2" style="z-index: 301; left: 0px; top: 1079px;" width="960px" height="560px"></canvas> 
<img id="map_img" src="img/PlantaBaja.svg" alt="Edificio Nuevo Planta Baja" usemap="#blueprint_map" style="width: 960px; height: 560px; z-index: 1; position: relative;"> 
<map id="blueprint_map" name="blueprint_map">...</map> 
<canvas id="myCanvas" style="z-index: 302; left: 0px; top: 1079px;" width="960px" height="560px"></canvas> 
</div>

그들은 같은 위치를 가지고 있지만 작동하지 않습니다.

없음 부트 스트랩은 : No Bootstrap

부트 스트랩 : Bootstrap

잘로드 할 것 같은데, 그 두 번째 이후에 변경합니다.

출처

2017-01-12 Aaron Castillo Alpizar

마지막으로 내 코드 작업을합니다. div를 래퍼처럼 사용하고 CSS 클래스에서 상대 위치와 너비를 100 %로 설정하고 style = "height : ### px"; 코드가 img heigth로 대체됩니다. 또한 스타일 위치 절대 값을 map_container div로 설정합니다. 마지막으로 모든 컨텐츠의 상단 0 왼쪽 0 y 위치 절대 및 z- 인덱스 작업을 완료하려면 표시되지만 보이지는 않습니다.

<div id="canvas-wrapper" class="canvas-wrapper" style="height: 560px;"> 
    <div id="map_container" style="position: absolute;"> 
     <img src="img/PlantaBaja.svg" id="map_img" alt="Edificio Nuevo Planta Baja" usemap="#blueprint_map" style="z-index: 303; position: absolute; opacity: 0; filter: alpha(opacity=0)"> 
     <canvas id="myCanvas2" style="position: absolute; z-index: 301; left: 0px; top: 0px;" width="960px" height="560px"></canvas> 
     <canvas id="myCanvas" style="position: absolute; z-index: 302; left: 0px; top: 0px;" width="960px" height="560px"></canvas> 
     <img src="img/PlantaBaja.svg" id="map_img" alt="Edificio Nuevo Planta Baja"> 
     <map id="blueprint_map" name="blueprint_map"> 
      <area id="area1" shape="rect" onmouseover="myHover(this);" onmouseout="myLeave();" coords="25,127,75,202" alt="Baño de hombres" title="Baño de hombres" onclick="setLocation(1);"> 
      ... 
     </map> 
    </div> 
</div>

VAR의 DIV byId = ('캔버스 래퍼');

var x, y, w, h; 

// get it's position and width+height 
x = 0; //img.offsetLeft; 
y = 0; //img.offsetTop; 
w = img.clientWidth; 
h = img.clientHeight; 
div.setAttribute('style', 'height: ' + h + 'px;');

결론 : 당신은 부트 스트랩에 Z- 인덱스를 사용해야하는 경우는 절대 요소와 상대 래퍼를 정의해야합니다.

출처

2017-02-01 21:21:54

부트 스트랩 캔버스 Z- 인덱스 문제

답변

관련 문제