Question

我有这个疯狂的问题，我们正在迁移到Bootstrap

我的java脚本代码在图像上创建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

似乎加载正确，它们会在一秒钟后发生变化。

Answer 1

最后我让我的代码工作。我使用div作为包装器，在css类上设置100％相对和宽度的位置，还有style =＆＃34; height：### px＆＃34 ;;代码将使用img heigth替换###。还将样式位置绝对设置为map_container div 最后所有内容都有前0名左0 0位置绝对和z-index 我需要将地图图像放在上面但不可见才能完成工作。

<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（＆＃39; canvas-wrapper＆＃39;）;

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

结论：如果您需要在bootstrap上使用z-index，则需要使用绝对元素定义相对包装。

Bootstrap画布z-index问题

1 个答案: