Bootstrap canvas z-index проблемы

У меня есть эта сумасшедшая проблема, мы переходим на 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>

У них одинаковая позиция, но она не работает.

Нет Bootstrap:
Нет Bootstrap

Загрузчик:
Бутстрэп

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

1 ответ

  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

    var div = byId (‘canvas-wrapper’);

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