Javascript dhtmlx布局中的颜色选择器

我在Dhtmlx项目中使用colorpicker工具，但它不起作用。我把它放在一个单元布局中。如果你试图选择颜色，它是完全封锁。有没有其他方法可以把它放到布局中？这里有一个活生生的例子：

我理解了原因：中间单元格内的画布与左侧单元格重叠，如果您尝试单击colorpicker，则您是在画布上单击，而不是在colorpicker上单击。现在的问题是：我不能调整画布的大小，我怎么能把左边的单元格放在画布上？我尝试使用z索引，但不起作用

 <script type="text/javascript">
    //the code of your application

    dhtmlx.image_path = "codebase/imgs/";
      dhtmlxEvent(window,"load",function(){ 


var main_layout = new dhtmlXLayoutObject(document.body, '3W');
main_layout.cells("b").attachObject("ThreeJS");
main_layout.cells("a").attachObject("colorPicker");

var a = main_layout.cells('a');
//a.collapse();
a.setWidth('400');
a.fixSize(1,0);


var b = main_layout.cells('b');
b.setWidth('600');
b.hideHeader();


var c = main_layout.cells('c');
c.setWidth('350');
c.hideHeader();
c.fixSize(1,0);


var toolbar_1 = main_layout.attachToolbar();
toolbar_1.setIconSize(32);
toolbar_1.setIconsPath('./codebase/imgs/32/');

toolbar_1.loadStruct('./data/toolbar.xml', function() {});
toolbar_1.setAlign("right");

var myColorPicker = new dhtmlXColorPicker({
parent : "colorPicker",
color : "#0000ff",
custom_colors : true
  });

});









</script>

<div id="toolbarObj" ></div>
<div id="colorPicker" style="">ciao</div>
<div  id="ThreeJS" ></div>

//应用程序的代码
dhtmlx.image_path=“codebase/imgs/”；
dhtmlxEvent（窗口，“加载”，函数（）{
var main_layout=新的DHTMLXLlayoutObject（document.body，“3W”）；
主布局单元（“b”）。附件对象（“ThreeJS”）；
主布局单元（“a”）。附件对象（“颜色选择器”）；
var a=主布局单元（“a”）；
//a、 塌陷（）；
a、 设置宽度（'400'）；
a、 固定大小（1,0）；
var b=主布局单元（“b”）；
b、 设置宽度（'600'）；
b、 隐藏者（）；
var c=主布局单元（“c”）；
c、 设置宽度（'350'）；
c、 隐藏者（）；
c、 固定大小（1,0）；
var toolbar_1=main_layout.attachToolbar（）；
工具栏_1.setIconSize（32）；
工具栏1.seticonPath（'./codebase/imgs/32/'）；
toolbar_1.loadStruct（'./data/toolbar.xml'，function（）{}）；
工具栏_1.设置对齐（“右”）；
var myColorPicker=新的DHTMLXLColorPicker({
父项：“颜色选择器”，
颜色：“0000ff”，
自定义颜色：真
});
});
再见

如果需要在布局上使用单独的颜色选择器，只需为其设置z索引即可。即：

<div id="colorPicker" style="position:absolute;top:150px;left:200px;z-index: 10"></div>