Bootstrap проблемы холст г-индекс

Question

У меня есть эта сумасшедшая проблема, мы мигрируют в Bootstrap

Мой код Java Script создать 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> 

Они имеют ту же позицию, но не работает.

Нет Bootstrap: No Bootstrap

Bootstrap: Bootstrap

Кажется, чтобы загрузить право, их менять через секунду.

Answer 1

Наконец-то я делаю свой код работы. Я использую div как обертку, устанавливаю позицию по относительной и ширине в 100% по классу css, а также 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> 

JS

вар деления = 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-индекс на загрузчике вам нужно будет определить относительную обертку с абсолютными элементами.