Canvas zindex issue

Question

Я использую ткань js api. На странице есть два холста. Если я покажу их оба, тогда все будет хорошо. Но я хочу показывать только один за раз. Итак, я использую абсолютное положение, чтобы область отображения была такой же. Проблема, с которой я сталкиваюсь, заключается в том, что когда первый холст был загружен, и я загружаю второй холст, как-то индекс z первого загруженного холста выше. Потому что я не могу выбрать элементы, размещенные на втором холсте.

Answer 1

Вы можете определить значение полотен CSS z-index несколько различных способов, либо с помощью встроенных стилей в HTML-тегах или с помощью таблицы стилей - но CSS z-index значений работают только на элементах со значением position и где это значение не установлено на static.

При наложении элементов HTML страницы непосредственно друг на друга, иногда полезно для мест их внутри контейнера элемента, например ...

<div id="canvas-container"> 
    <canvas id="canvas1"></canvas> 
    <canvas id="canvas2"></canvas> 
</div> 

Принимая во внимание, что дочерние элементы наследуют z-index значения от их родители, поэтому они требуют четкого, этот механизм может быть стиль с элементами стилей, как так ...

#canvas-container { 
    position:relative; 
    z-index:100; 
} 
/* canvas position */ 
#canvas1, #canvas2 { 
    position:absolute; 
    top:0; 
    left:0; 
} 
/* canvas z-index */ 
#canvas1 { 
    z-index:200; 
} 
#canvas2 { 
    z-index:300; 
} 

Это место #canvas1 под #canvas2, как перекрывающиеся элементы с более низкими значениями z-index расположены под элементами с более высокими значениями.

Ширин CSS и высота значение всех трех элементов также может быть установлено на то же значение, чтобы помочь сохранить макет страницы ...

#canvas-container, #canvas1, #canvas2 { 
    width:???px; 
    height:???px; 
} 

Похожих CSS свойства и значения могут быть добавлены к HTML-тегам непосредственно с the html style attribute, или added dynamically via JavaScript.

См. Также: MDN article on CSS z-index.