Bootstrap toile problèmes z-index

Question

J'ai ce problème fou, nous émigrent à Bootstrap

Mon code java script créer 2 toile sur une image et l'insérer dans div; la souris sur (bleu) et cliquez sur (rouge) dessine sur la toile.

Certains code:

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

Ils ont la même position, mais sa ne fonctionne pas.

Non Bootstrap: No Bootstrap

Bootstrap: Bootstrap

Semble load, les changer après une seconde.

Answer 1

Enfin, je fais fonctionner mon code. J'utilise un div comme un wrapper, positionne la position sur relative et width dans 100% sur css class, et aussi style = "height: ### px"; le code remplacera ### avec img higth. Également définir la position de style absolue à map_container div enfin tout le contenu a top 0 gauche 0 y position absolue et z-index Je dois mettre l'image de la carte sur mais pas visible pour faire le travail.

<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

var div = BYID ('toile emballage');

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;'); 

Conclusion: si vous avez besoin d'utiliser z-index sur bootstrap, vous aurez besoin de définir enveloppe par rapport à des éléments absolus.